Repository: provectus/kafka-ui
Issue: UI: Mark initializing clusters with yellow icon 
Labels: type/enhancement
good first issue
scope/frontend
status/accepted

### Is your proposal related to a problem?

Currently after application startup we asynchronously start cluster metrics collection. Before collection finished cluster status is shown as offline (red). It can be confusing since offline (by some error) clusters are also marked as red.

(Write your answer here.)

### Describe the solution you'd like

I propose to mark 'initializing'  clusters as yellow to highlight that it was not initialized yet. To distinguish this situations we need to check Cluster's lastError field. If it is **not** filled and status is offline cluster should be marked yellow. 

### Describe alternatives you've considered

<!--
  Let us know about other solutions you've tried or researched.
-->

(Write your answer here.)

### Additional context

<!--
  Is there anything else you can add about the proposal?
  You might want to link to related issues here, if you haven't already.
-->

(Write your answer here.)


Issue comments:
@Zorii4 I feel like this has been done already, please check



Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
index a01434b91aa..9b61878bba1 100644
--- a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
+++ b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
@@ -12,7 +12,7 @@ export const Wrapper = styled.li.attrs({ role: 'menuitem' })<{
     display: grid;
     grid-template-columns: min-content min-content auto min-content;
     grid-template-areas: 'title status . chevron';
-    gap: 0px 5px;
+    gap: 0 5px;
 
     padding: 0.5em 0.75em;
     cursor: pointer;
@@ -52,13 +52,20 @@ export const StatusIcon = styled.circle.attrs({
   cx: 2,
   cy: 2,
   r: 2,
-})<{ status: ServerStatus }>(
-  ({ theme, status }) => css`
-    fill: ${status === ServerStatus.ONLINE
-      ? theme.menu.statusIconColor.online
-      : theme.menu.statusIconColor.offline};
-  `
-);
+  role: 'status-circle',
+})<{ status: ServerStatus }>(({ theme, status }) => {
+  const statusColor: {
+    [k in ServerStatus]: string;
+  } = {
+    [ServerStatus.ONLINE]: theme.menu.statusIconColor.online,
+    [ServerStatus.OFFLINE]: theme.menu.statusIconColor.offline,
+    [ServerStatus.INITIALIZING]: theme.menu.statusIconColor.initializing,
+  };
+
+  return css`
+    fill: ${statusColor[status]};
+  `;
+});
 
 export const ChevronWrapper = styled.svg.attrs({
   viewBox: '0 0 10 6',
diff --git a/kafka-ui-react-app/src/components/Nav/ClusterTab/__tests__/ClusterTab.styled.spec.tsx b/kafka-ui-react-app/src/components/Nav/ClusterTab/__tests__/ClusterTab.styled.spec.tsx
new file mode 100644
index 00000000000..76b69ebd59b
--- /dev/null
+++ b/kafka-ui-react-app/src/components/Nav/ClusterTab/__tests__/ClusterTab.styled.spec.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import theme from 'theme/theme';
+import { screen } from '@testing-library/react';
+import * as S from 'components/Nav/ClusterTab/ClusterTab.styled';
+import { ServerStatus } from 'generated-sources';
+
+describe('Cluster Styled Components', () => {
+  describe('Wrapper Component', () => {
+    it('should check the rendering and correct Styling when it is open', () => {
+      render(<S.Wrapper isOpen />);
+      expect(screen.getByRole('menuitem')).toHaveStyle(
+        `color:${theme.menu.color.isOpen}`
+      );
+    });
+    it('should check the rendering and correct Styling when it is Not open', () => {
+      render(<S.Wrapper isOpen={false} />);
+      expect(screen.getByRole('menuitem')).toHaveStyle(
+        `color:${theme.menu.color.normal}`
+      );
+    });
+  });
+
+  describe('StatusIcon Component', () => {
+    it('should check the rendering and correct Styling when it is online', () => {
+      render(<S.StatusIcon status={ServerStatus.ONLINE} />);
+
+      expect(screen.getByRole('status-circle')).toHaveStyle(
+        `fill:${theme.menu.statusIconColor.online}`
+      );
+    });
+
+    it('should check the rendering and correct Styling when it is offline', () => {
+      render(<S.StatusIcon status={ServerStatus.OFFLINE} />);
+      expect(screen.getByRole('status-circle')).toHaveStyle(
+        `fill:${theme.menu.statusIconColor.offline}`
+      );
+    });
+
+    it('should check the rendering and correct Styling when it is Initializing', () => {
+      render(<S.StatusIcon status={ServerStatus.INITIALIZING} />);
+      expect(screen.getByRole('status-circle')).toHaveStyle(
+        `fill:${theme.menu.statusIconColor.initializing}`
+      );
+    });
+  });
+});
diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts
index e30cacfb209..e2b337a3ce5 100644
--- a/kafka-ui-react-app/src/theme/theme.ts
+++ b/kafka-ui-react-app/src/theme/theme.ts
@@ -225,6 +225,7 @@ const theme = {
     statusIconColor: {
       online: Colors.green[40],
       offline: Colors.red[50],
+      initializing: Colors.yellow[20],
     },
     chevronIconColor: Colors.neutral[50],
   },


Test patch: