Provisioning: Update pulling disabled badge (#112832)

* Provisioning: Update pulling disabled badge

* Move props

* Use early return

public/app/features/provisioning/Shared/StatusBadge.tsx

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import { t } from '@grafana/i18n';
 import { locationService } from '@grafana/runtime';
 import { Badge, BadgeColor, IconName } from '@grafana/ui';
@@ -5,85 +7,93 @@ import { Repository } from 'app/api/clients/provisioning/v0alpha1';
 
 import { PROVISIONING_URL } from '../constants';
 
+interface BadgeConfig {
+  color: BadgeColor;
+  text: string;
+  icon: IconName;
+  tooltip?: string;
+}
+
+function getBadgeConfig(repo: Repository): BadgeConfig {
+  if (repo.metadata?.deletionTimestamp) {
+    return {
+      color: 'red',
+      text: t('provisioning.status-badge.deleting', 'Deleting'),
+      icon: 'spinner',
+    };
+  }
+
+  if (!repo.spec?.sync?.enabled) {
+    return {
+      color: 'orange',
+      text: t('provisioning.status-badge.automatic-pulling-disabled', 'Automatic pulling disabled'),
+      icon: 'info-circle',
+    };
+  }
+
+  if (!repo.status?.sync?.state?.length) {
+    return {
+      color: 'darkgrey',
+      text: t('provisioning.status-badge.pending', 'Pending'),
+      icon: 'spinner',
+      tooltip: t('provisioning.status-badge.waiting-for-health-check', 'Waiting for health check to run'),
+    };
+  }
+
+  // Sync state
+  switch (repo.status?.sync?.state) {
+    case 'success':
+      return {
+        icon: 'check',
+        text: t('provisioning.status-badge.up-to-date', 'Up-to-date'),
+        color: 'green',
+      };
+    case 'warning':
+      return {
+        color: 'orange',
+        text: t('provisioning.status-badge.warning', 'Warning'),
+        icon: 'exclamation-triangle',
+      };
+    case 'working':
+    case 'pending':
+      return {
+        color: 'darkgrey',
+        text: t('provisioning.status-badge.pulling', 'Pulling'),
+        icon: 'spinner',
+      };
+    case 'error':
+      return {
+        color: 'red',
+        text: t('provisioning.status-badge.error', 'Error'),
+        icon: 'exclamation-triangle',
+      };
+    default:
+      return {
+        color: 'purple',
+        text: t('provisioning.status-badge.unknown', 'Unknown'),
+        icon: 'exclamation-triangle',
+      };
+  }
+}
+
 interface StatusBadgeProps {
   repo?: Repository;
   displayOnly?: boolean; // if true, disable click action and cursor will be default
 }
 
-/**
- * @description Displays a status badge for the given provisioned repository.
- */
 export function StatusBadge({ repo, displayOnly = false }: StatusBadgeProps) {
+  const handleClick = useCallback(() => {
+    if (displayOnly || !repo?.metadata?.name) {
+      return;
+    }
+    locationService.push(`${PROVISIONING_URL}/${repo.metadata.name}/?tab=overview`);
+  }, [repo?.metadata?.name, displayOnly]);
+
   if (!repo) {
     return null;
   }
 
-  // TODO: remove after 12.2
-  if (repo.spec?.type !== 'local' && !repo.secure?.token?.name) {
-    return (
-      <Badge
-        color={'red'}
-        icon={'exclamation-triangle'}
-        style={{ cursor: 'pointer' }}
-        text={t('provisioning.inline-token-warning-badge-text', 'Token needs to be saved again')}
-        tooltip={t(
-          'inline-token-warning-badge-tooltip',
-          'The method to save the token is to re-enter it in the repository settings.'
-        )}
-        onClick={() => {
-          // navigate to edit page, rather than view page
-          locationService.push(`${PROVISIONING_URL}/${repo.metadata?.name}/edit`);
-        }}
-      />
-    );
-  }
-
-  let tooltip: string | undefined = undefined;
-  let color: BadgeColor = 'purple';
-  let text = 'Unknown';
-  let icon: IconName = 'exclamation-triangle';
-
-  if (repo.metadata?.deletionTimestamp) {
-    color = 'red';
-    text = 'Deleting';
-    icon = 'spinner';
-  } else if (!repo.spec?.sync?.enabled) {
-    color = 'red';
-    text = 'Automatic pulling disabled';
-    icon = 'info-circle';
-  } else if (!repo.status?.sync?.state?.length) {
-    color = 'darkgrey';
-    text = 'Pending';
-    icon = 'spinner';
-    tooltip = 'Waiting for health check to run';
-  } else {
-    // Sync state
-    switch (repo.status?.sync?.state) {
-      case 'success':
-        icon = 'check';
-        text = 'Up-to-date';
-        color = 'green';
-        break;
-      case 'working':
-      case 'warning':
-        color = 'orange';
-        text = 'warning';
-        icon = 'exclamation-triangle';
-        break;
-      case 'pending':
-        color = 'darkgrey';
-        text = 'Pulling';
-        icon = 'spinner';
-        break;
-      case 'error':
-        color = 'red';
-        text = 'Error';
-        icon = 'exclamation-triangle';
-        break;
-      default:
-        break;
-    }
-  }
+  const { color, text, icon, tooltip } = getBadgeConfig(repo);
 
   return (
     <Badge
@@ -92,11 +102,7 @@ export function StatusBadge({ repo, displayOnly = false }: StatusBadgeProps) {
       text={text}
       style={{ cursor: displayOnly ? 'default' : 'pointer' }}
       tooltip={tooltip}
-      onClick={() => {
-        if (!displayOnly) {
-          locationService.push(`${PROVISIONING_URL}/${repo.metadata?.name}/?tab=overview`);
-        }
-      }}
+      onClick={handleClick}
     />
   );
 }

public/locales/en-US/grafana.json

@@ -9199,7 +9199,6 @@
     "name-line-width": "Line width",
     "name-stacking": "Stacking"
   },
-  "inline-token-warning-badge-tooltip": "The method to save the token is to re-enter it in the repository settings.",
   "inspector": {
     "inspect-data-tab": {
       "loading": "Loading",
@@ -11654,7 +11653,6 @@
       "unsupported-repository-type": "Unsupported repository type: {{repositoryType}}"
     },
     "inline-secure-values-warning": "You need to save your access tokens again due to a system update",
-    "inline-token-warning-badge-text": "Token needs to be saved again",
     "job-status": {
       "label-view-details": "View details",
       "loading-finished-job": "Loading finished job...",
@@ -11831,6 +11829,17 @@
       "label-current-step": "Current step",
       "label-pending-step": "Pending step"
     },
+    "status-badge": {
+      "automatic-pulling-disabled": "Automatic pulling disabled",
+      "deleting": "Deleting",
+      "error": "Error",
+      "pending": "Pending",
+      "pulling": "Pulling",
+      "unknown": "Unknown",
+      "up-to-date": "Up-to-date",
+      "waiting-for-health-check": "Waiting for health check to run",
+      "warning": "Warning"
+    },
     "success-title-default": "Success",
     "sync-job": {
       "error-no-job-id": "Failed to start job",