From 8d29b5ae711e822c896b575b2f1d082439de759e Mon Sep 17 00:00:00 2001
From: Steven Kang <skan070@gmail.com>
Date: Fri, 27 Jun 2025 09:38:04 +1200
Subject: [PATCH] fix: kubeconfig download button inconsistency between http
 and https (#829)

---
 .../KubeconfigButton/KubeconfigButton.tsx     | 49 ++++++++++++-------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx b/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx
index f2b20857d..393c55f9c 100644
--- a/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx
@@ -7,6 +7,7 @@ import { trackEvent } from '@/angulartics.matomo/analytics-services';
 import { Query } from '@/react/portainer/environments/queries/useEnvironmentList';
 
 import { Button } from '@@/buttons';
+import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
 
 import { KubeconfigPrompt } from './KubeconfigPrompt';
 
@@ -23,23 +24,41 @@ export function KubeconfigButton({ environments, envQueryParams }: Props) {
     isKubernetesEnvironment(env.Type)
   );
 
-  if (!isKubeconfigButtonVisible()) {
-    return null;
+  const isHttp = window.location.protocol === 'http:';
+  const noKubeEnvs = kubeEnvs.length === 0;
+  const isDisabled = noKubeEnvs || isHttp;
+
+  let tooltipMessage = '';
+  if (isHttp) {
+    tooltipMessage =
+      'Kubeconfig download is not available when Portainer is accessed via HTTP. Please use HTTPS';
+  } else if (noKubeEnvs) {
+    tooltipMessage = 'No Kubernetes environments detected';
   }
 
+  const button = (
+    <Button
+      onClick={handleClick}
+      data-cy="download-kubeconfig-button"
+      size="medium"
+      className="!m-0"
+      icon={Download}
+      disabled={isDisabled}
+      color="light"
+    >
+      Kubeconfig
+    </Button>
+  );
+
   return (
     <>
-      <Button
-        onClick={handleClick}
-        data-cy="download-kubeconfig-button"
-        size="medium"
-        className="!m-0"
-        icon={Download}
-        disabled={kubeEnvs.length === 0}
-        color="light"
-      >
-        Kubeconfig
-      </Button>
+      {isDisabled ? (
+        <TooltipWithChildren message={tooltipMessage}>
+          <span className="!m-0">{button}</span>
+        </TooltipWithChildren>
+      ) : (
+        button
+      )}
       {prompt()}
     </>
   );
@@ -60,10 +79,6 @@ export function KubeconfigButton({ environments, envQueryParams }: Props) {
     setIsOpen(false);
   }
 
-  function isKubeconfigButtonVisible() {
-    return window.location.protocol === 'https:';
-  }
-
   function prompt() {
     return (
       isOpen && (