[Issue-1492] Fixed all tag-badges background colors (#1594)

Co-authored-by: Anton Zorin <ant.zorin@gmail.com>

kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Connector } from 'generated-sources';
 import * as C from 'components/common/Tag/Tag.styled';
 import * as Metrics from 'components/common/Metrics';
+import getTagColor from 'components/Connect/Utils/TagColor';
 
 export interface OverviewProps {
   connector: Connector | null;
@@ -31,7 +32,9 @@ const Overview: React.FC<OverviewProps> = ({
           </Metrics.Indicator>
         )}
         <Metrics.Indicator label="State">
-          <C.Tag color="yellow">{connector.status.state}</C.Tag>
+          <C.Tag color={getTagColor(connector.status)}>
+            {connector.status.state}
+          </C.Tag>
         </Metrics.Indicator>
         <Metrics.Indicator label="Tasks Running">
           {runningTasksCount}

kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Overview view matches snapshot 1`] = `
   border-radius: 16px;
   height: 20px;
   line-height: 20px;
-  background-color: #FFEECC;
+  background-color: #D6F5E0;
   color: #171A1C;
   font-size: 12px;
   display: inline-block;
@@ -179,7 +179,7 @@ exports[`Overview view matches snapshot 1`] = `
           <span>
             <p
               className="c5"
-              color="yellow"
+              color="green"
             >
               RUNNING
             </p>

kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx

@@ -6,6 +6,7 @@ import Dropdown from 'components/common/Dropdown/Dropdown';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
 import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
 import * as C from 'components/common/Tag/Tag.styled';
+import getTagColor from 'components/Connect/Utils/TagColor';
 
 interface RouterParams {
   clusterName: ClusterName;
@@ -35,7 +36,7 @@ const ListItem: React.FC<ListItemProps> = ({ task, restartTask }) => {
       <td>{task.status?.id}</td>
       <td>{task.status?.workerId}</td>
       <td>
-        <C.Tag color="yellow">{task.status.state}</C.Tag>
+        <C.Tag color={getTagColor(task.status)}>{task.status.state}</C.Tag>
       </td>
       <td>{task.status.trace || 'null'}</td>
       <td style={{ width: '5%' }}>

kafka-ui-react-app/src/components/Connect/List/ListItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ConnectorState, FullConnectorInfo } from 'generated-sources';
+import { FullConnectorInfo } from 'generated-sources';
 import { clusterConnectConnectorPath, clusterTopicPath } from 'lib/paths';
 import { ClusterName } from 'redux/interfaces';
 import { Link, NavLink } from 'react-router-dom';
@@ -12,6 +12,7 @@ import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationM
 import { Tag } from 'components/common/Tag/Tag.styled';
 import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
 import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
+import getTagColor from 'components/Connect/Utils/TagColor';
 
 import * as S from './List.styled';
 
@@ -51,20 +52,6 @@ const ListItem: React.FC<ListItemProps> = ({
     return tasksCount - (failedTasksCount || 0);
   }, [tasksCount, failedTasksCount]);
 
-  const stateColor = React.useMemo(() => {
-    const { state = '' } = status;
-
-    switch (state) {
-      case ConnectorState.RUNNING:
-        return 'green';
-      case ConnectorState.FAILED:
-      case ConnectorState.TASK_FAILED:
-        return 'red';
-      default:
-        return 'yellow';
-    }
-  }, [status]);
-
   return (
     <tr>
       <TableKeyLink>
@@ -87,7 +74,7 @@ const ListItem: React.FC<ListItemProps> = ({
           ))}
         </S.TagsWrapper>
       </td>
-      <td>{status && <Tag color={stateColor}>{status.state}</Tag>}</td>
+      <td>{status && <Tag color={getTagColor(status)}>{status.state}</Tag>}</td>
       <td>
         {runningTasks && (
           <span>

kafka-ui-react-app/src/components/Connect/Utils/TagColor.ts

@@ -0,0 +1,17 @@
+import { ConnectorState, ConnectorStatus, TaskStatus } from 'generated-sources';
+
+const getTagColor = (status: ConnectorStatus | TaskStatus) => {
+  const { state = '' } = status;
+
+  switch (state) {
+    case ConnectorState.RUNNING:
+      return 'green';
+    case ConnectorState.FAILED:
+    case ConnectorState.TASK_FAILED:
+      return 'red';
+    default:
+      return 'yellow';
+  }
+};
+
+export default getTagColor;

kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx

@@ -26,6 +26,7 @@ import {
   getIsConsumerGroupDeleted,
   getAreConsumerGroupDetailsFulfilled,
 } from 'redux/reducers/consumerGroups/consumerGroupsSlice';
+import getTagColor from 'components/ConsumerGroups/Utils/TagColor';
 
 import ListItem from './ListItem';
 
@@ -90,7 +91,7 @@ const Details: React.FC = () => {
       <Metrics.Wrapper>
         <Metrics.Section>
           <Metrics.Indicator label="State">
-            <Tag color="yellow">{consumerGroup.state}</Tag>
+            <Tag color={getTagColor(consumerGroup)}>{consumerGroup.state}</Tag>
           </Metrics.Indicator>
           <Metrics.Indicator label="Members">
             {consumerGroup.members}

kafka-ui-react-app/src/components/ConsumerGroups/List/ListItem.tsx

@@ -1,27 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { ConsumerGroup, ConsumerGroupState } from 'generated-sources';
+import { ConsumerGroup } from 'generated-sources';
 import { Tag } from 'components/common/Tag/Tag.styled';
 import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
+import getTagColor from 'components/ConsumerGroups/Utils/TagColor';
 
 const ListItem: React.FC<{ consumerGroup: ConsumerGroup }> = ({
   consumerGroup,
 }) => {
-  const stateColor = React.useMemo(() => {
-    const { state = '' } = consumerGroup;
-
-    switch (state) {
-      case ConsumerGroupState.STABLE:
-        return 'green';
-      case ConsumerGroupState.DEAD:
-        return 'red';
-      case ConsumerGroupState.EMPTY:
-        return 'white';
-      default:
-        return 'yellow';
-    }
-  }, [consumerGroup]);
-
   return (
     <tr>
       <TableKeyLink>
@@ -34,7 +20,7 @@ const ListItem: React.FC<{ consumerGroup: ConsumerGroup }> = ({
       <td>{consumerGroup.messagesBehind}</td>
       <td>{consumerGroup.coordinator?.id}</td>
       <td>
-        <Tag color={stateColor}>{consumerGroup.state}</Tag>
+        <Tag color={getTagColor(consumerGroup)}>{consumerGroup.state}</Tag>
       </td>
     </tr>
   );

kafka-ui-react-app/src/components/ConsumerGroups/Utils/TagColor.ts

@@ -0,0 +1,16 @@
+import { ConsumerGroupState, ConsumerGroup } from 'generated-sources';
+
+const getTagColor = (consumerGroup: ConsumerGroup) => {
+  const { state = '' } = consumerGroup;
+  switch (state) {
+    case ConsumerGroupState.STABLE:
+      return 'green';
+    case ConsumerGroupState.DEAD:
+      return 'red';
+    case ConsumerGroupState.EMPTY:
+      return 'white';
+    default:
+      return 'yellow';
+  }
+};
+export default getTagColor;

kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups.tsx

@@ -7,6 +7,7 @@ import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeader
 import { Tag } from 'components/common/Tag/Tag.styled';
 import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
 import { Link } from 'react-router-dom';
+import getTagColor from 'components/ConsumerGroups/Utils/TagColor';
 
 interface Props extends Topic, TopicDetails {
   clusterName: ClusterName;
@@ -57,7 +58,7 @@ const TopicConsumerGroups: React.FC<Props> = ({
               <td>{consumer.coordinator?.id}</td>
               <td>
                 {consumer.state && (
-                  <Tag color="yellow">{`${consumer.state
+                  <Tag color={getTagColor(consumer)}>{`${consumer.state
                     .charAt(0)
                     .toUpperCase()}${consumer.state
                     .slice(1)