fix: adjust badges (#3464)

* fix: adjust badges type names * fix: fix type mappings * fix: remove console.log
kyma-project · Nov 12, 2024 · ce4764e · ce4764e
1 parent ba9135e
commit ce4764e
Show file tree

Hide file tree

Showing 22 changed files with 73 additions and 56 deletions.
diff --git a/src/components/Clusters/views/ClusterOverview/ClusterNodes.js b/src/components/Clusters/views/ClusterOverview/ClusterNodes.js
@@ -19,7 +19,7 @@ export function ClusterNodes({ data, error, loading }) {
   const { t } = useTranslation();
 
   const getStatusType = status => {
-    if (status === 'Ready') return 'Success';
+    if (status === 'Ready') return 'Positive';
     return undefined;
   };
 

diff --git a/src/components/Extensibility/components/Badge.js b/src/components/Extensibility/components/Badge.js
@@ -11,9 +11,9 @@ import {
 import './Badge.scss';
 
 const TYPE_FALLBACK = new Map([
-  ['success', 'Success'],
-  ['warning', 'Warning'],
-  ['error', 'Error'],
+  ['positive', 'Positive'],
+  ['critical', 'Critical'],
+  ['negative', 'Negative'],
   ['info', 'Information'],
 ]);
 
@@ -63,10 +63,10 @@ export function Badge({
     }
   }
 
-  if (type === 'negative') type = 'Warning';
+  if (type === 'negative') type = 'Critical';
   else if (type === 'informative') type = 'Information';
-  else if (type === 'positive') type = 'Success';
-  else if (type === 'critical') type = 'Error';
+  else if (type === 'positive') type = 'Positive';
+  else if (type === 'critical') type = 'Negative';
 
   type = TYPE_FALLBACK.get(type) || type;
 

diff --git a/src/components/HelmReleases/HelmReleaseStatus.js b/src/components/HelmReleases/HelmReleaseStatus.js
@@ -1,14 +1,13 @@
-import React from 'react';
 import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';
 
 export function HelmReleaseStatus({ status }) {
   const resolveType = status => {
     switch (status) {
       case 'deployed':
-        return 'Success';
+        return 'Positive';
       case 'uninstalling':
       case 'failed':
-        return 'Error';
+        return 'Negative';
       case 'unknown':
         return 'None';
       default:

diff --git a/src/components/KymaModules/KymaModulesList.js b/src/components/KymaModules/KymaModulesList.js
@@ -224,7 +224,7 @@ export default function KymaModulesList({
           resourceKind="kymas"
           type={
             moduleStatus?.state === 'Ready'
-              ? 'Success'
+              ? 'Positive'
               : moduleStatus?.state === 'Processing' ||
                 moduleStatus?.state === 'Deleting' ||
                 moduleStatus?.state === 'Unmanaged' ||

diff --git a/src/components/KymaModules/components/ModuleStatus.tsx b/src/components/KymaModules/components/ModuleStatus.tsx
@@ -7,18 +7,27 @@ export const ModuleStatus = ({ resource }: any) => {
   const moduleState = status?.state || 'Unknown';
   const moduleMessage = status?.description;
 
+  const resolveType = (status: string) => {
+    switch (status) {
+      case 'Ready':
+        return 'Positive';
+      case 'Processing':
+      case 'Deleting':
+      case 'Unknown':
+        return 'None';
+      case 'Warning':
+        return 'Critical';
+      case 'Error':
+        return 'Negative';
+      default:
+        return 'None';
+    }
+  };
+
   return (
     <StatusBadge
       resourceKind="kymas"
-      type={
-        moduleState === 'Ready'
-          ? 'Success'
-          : moduleState === 'Processing' ||
-            moduleState === 'Deleting' ||
-            moduleState === 'Unknown'
-          ? 'None'
-          : moduleState || 'None'
-      }
+      type={resolveType(moduleState)}
       tooltipContent={moduleMessage}
     >
       {moduleState}

diff --git a/src/resources/CustomResourceDefinitions/CurrentCRDVersion.js b/src/resources/CustomResourceDefinitions/CurrentCRDVersion.js
@@ -57,7 +57,7 @@ export const CurrentCRDVersion = resource => {
             'custom-resource-definitions.subtitle.version',
           )} ${storageVersion.name}`}</Title>
           <StatusBadge
-            type={storageVersion.served ? 'Success' : 'Information'}
+            type={storageVersion.served ? 'Positive' : 'Information'}
             className="version-status"
             resourceKind="custom-resource-definitions"
           >
@@ -67,7 +67,7 @@ export const CurrentCRDVersion = resource => {
           </StatusBadge>
           {storageVersion.storage && (
             <StatusBadge
-              type="Success"
+              type="Positive"
               className="version-status"
               resourceKind="custom-resource-definitions"
             >

diff --git a/src/resources/Ingresses/IngressDetails.js b/src/resources/Ingresses/IngressDetails.js
@@ -72,8 +72,8 @@ export function IngressDetails(props) {
       totalPorts === 0
         ? 'Information'
         : totalPorts === healthyPorts
-        ? 'Success'
-        : 'Error';
+        ? 'Positive'
+        : 'Negative';
 
     return (
       <StatusBadge

diff --git a/src/resources/Jobs/JobCompletions.js b/src/resources/Jobs/JobCompletions.js
@@ -6,7 +6,7 @@ export function JobCompletions({ job }) {
 
   const succeeded = job.status.succeeded || 0;
   const completions = job.spec.completions || 0;
-  const statusType = succeeded === completions ? 'Success' : 'Information';
+  const statusType = succeeded === completions ? 'Positive' : 'Information';
 
   return (
     <StatusBadge

diff --git a/src/resources/Jobs/JobConditions.js b/src/resources/Jobs/JobConditions.js
@@ -15,9 +15,9 @@ export function JobConditions(job) {
   ];
   const conditionTypeStatus = type => {
     if (type === 'Complete') {
-      return 'Success';
+      return 'Positive';
     } else if (type === 'Failed') {
-      return 'Error';
+      return 'Negative';
     } else {
       return 'Information';
     }

diff --git a/src/resources/Namespaces/NamespaceStatus.js b/src/resources/Namespaces/NamespaceStatus.js
@@ -1,15 +1,14 @@
-import React from 'react';
 import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';
 
 export function NamespaceStatus({ namespaceStatus }) {
   const badgeType = status => {
     switch (status) {
       case 'Active':
-        return 'Success';
+        return 'Positive';
       case 'Terminating':
         return 'Information';
       default:
-        return 'Error';
+        return 'Negative';
     }
   };
 

diff --git a/src/resources/PersistentVolumes/PersistentVolumeStatus.js b/src/resources/PersistentVolumes/PersistentVolumeStatus.js
@@ -1,17 +1,16 @@
-import React from 'react';
 import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';
 
 export function PersistentVolumeStatus({ status }) {
   const badgeType = status => {
     switch (status) {
       case 'Bound':
       case 'Available':
-        return 'Success';
+        return 'Positive';
       case 'Released':
       case 'Pending':
         return 'Information';
       default:
-        return 'Error';
+        return 'Negative';
     }
   };
 

diff --git a/src/resources/Pods/ContainerStatus.js b/src/resources/Pods/ContainerStatus.js
diff --git a/src/resources/Pods/PodRestarts.js b/src/resources/Pods/PodRestarts.js
diff --git a/src/resources/Pods/PodStatus.js b/src/resources/Pods/PodStatus.js
diff --git a/src/shared/components/BTPResourceStatus.js b/src/shared/components/BTPResourceStatus.js
@@ -7,7 +7,7 @@ export function BTPResourceStatus({ status, resourceKind }) {
 
   if (status?.ready === 'True' && lastCondition.type === 'Ready') {
     return (
-      <StatusBadge type="Success" resourceKind={resourceKind}>
+      <StatusBadge type="Positive" resourceKind={resourceKind}>
         {lastCondition.reason}
       </StatusBadge>
     );

diff --git a/src/shared/components/ExpandableListItem/ExpandableListItem.tsx b/src/shared/components/ExpandableListItem/ExpandableListItem.tsx
@@ -50,7 +50,7 @@ export const ExpandableListItem = ({
           {header}
           {status && (
             <StatusBadge
-              type={status === 'True' ? 'Success' : 'Error'}
+              type={status === 'True' ? 'Positive' : 'Negative'}
               className={'header__status-badge'}
             >
               {status}

diff --git a/src/shared/components/PersistentVolumeClaimStatus.js b/src/shared/components/PersistentVolumeClaimStatus.js
@@ -1,22 +1,21 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';
 
 const createPhaseProperties = (phase, t) => {
   switch (phase) {
     case 'Bound':
       return {
-        type: 'Success',
+        type: 'Positive',
         tooltipContent: t('persistent-volume-claims.tooltips.bound'),
       };
     case 'Lost':
       return {
-        type: 'Error',
+        type: 'Negative',
         tooltipContent: t('persistent-volume-claims.tooltips.lost'),
       };
     case 'Pending':
       return {
-        type: 'Warning',
+        type: 'Critical',
         tooltipContent: t('persistent-volume-claims.tooltips.pending'),
       };
     default:

diff --git a/src/shared/components/PopoverBadge/PopoverBadge.tsx b/src/shared/components/PopoverBadge/PopoverBadge.tsx
@@ -9,7 +9,7 @@ import { createPortal } from 'react-dom';
 interface PopoverBadgeProps {
   children?: ReactNode;
   tooltipContent: ReactNode;
-  type: 'Information' | 'Success' | 'Error' | 'Warning' | 'None';
+  type: 'Information' | 'Positive' | 'Negative' | 'Critical' | 'None';
   className?: string;
 }
 

diff --git a/src/shared/components/RunningPodsStatus.js b/src/shared/components/RunningPodsStatus.js
@@ -7,7 +7,7 @@ export function RunningPodsStatus({ running, expected }) {
     running === 1
       ? t('common.tooltips.running-pods-singular')
       : t('common.tooltips.running-pods-plural', { running });
-  const statusType = running === expected ? 'Success' : 'Error';
+  const statusType = running === expected ? 'Positive' : 'Negative';
 
   return (
     <StatusBadge

diff --git a/src/shared/components/StatusBadge/StatusBadge.js b/src/shared/components/StatusBadge/StatusBadge.js
@@ -27,17 +27,17 @@ const resolveType = status => {
     case 'Success':
     case 'Succeeded':
     case 'Ok':
-      return 'Success';
+      return 'Positive';
 
     case 'Unknown':
     case 'Warning':
-      return 'Warning';
+      return 'Critical';
 
     case 'Failed':
     case 'Error':
     case 'Failure':
     case 'Invalid':
-      return 'Error';
+      return 'Negative';
 
     default:
       return 'None';
@@ -58,9 +58,9 @@ const prepareTranslationPath = (resourceKind, value, type) => {
 };
 
 const TYPE_FALLBACK = new Map([
-  ['success', 'Success'],
-  ['warning', 'Warning'],
-  ['error', 'Error'],
+  ['positive', 'Positive'],
+  ['critical', 'Critical'],
+  ['negative', 'Negative'],
   ['info', 'Information'],
 ]);
 
@@ -168,7 +168,13 @@ export const StatusBadge = ({
 StatusBadge.propTypes = {
   additionalContent: PropTypes.node,
   tooltipContent: PropTypes.node,
-  type: PropTypes.oneOf(['Information', 'Success', 'Error', 'Warning', 'None']),
+  type: PropTypes.oneOf([
+    'Information',
+    'Positive',
+    'Negative',
+    'Critical',
+    'None',
+  ]),
   autoResolveType: PropTypes.bool,
   noTooltip: PropTypes.bool,
   resourceKind: PropTypes.string,

diff --git a/src/shared/components/SubscriptionConditionStatus.js b/src/shared/components/SubscriptionConditionStatus.js
@@ -7,11 +7,11 @@ export const SubscriptionConditionStatus = ({ condition }) => {
   const statusBadgeProperties =
     condition?.status === 'True'
       ? {
-          type: 'Success',
+          type: 'Positive',
           text: t('common.statuses.ready'),
         }
       : {
-          type: 'Error',
+          type: 'Negative',
           text: t('common.statuses.error'),
         };
   return (

diff --git a/src/shared/components/TooltipBadge/TooltipBadge.js b/src/shared/components/TooltipBadge/TooltipBadge.js
@@ -39,7 +39,13 @@ export const TooltipBadge = ({
 
 TooltipBadge.propTypes = {
   tooltipContent: PropTypes.node,
-  type: PropTypes.oneOf(['Information', 'Success', 'Error', 'Warning', 'None']),
+  type: PropTypes.oneOf([
+    'Information',
+    'Positive',
+    'Negative',
+    'Critical',
+    'None',
+  ]),
   tooltipProps: PropTypes.object,
   className: PropTypes.string,
 };