fix: kubeconfig download button inconsistency between http and https (#829)

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()) {
+  const isHttp = window.location.protocol === 'http:';
-    return null;
+  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';
   }
 
-  return (
+  const button = (
-    <>
     <Button
       onClick={handleClick}
       data-cy="download-kubeconfig-button"
       size="medium"
       className="!m-0"
       icon={Download}
-        disabled={kubeEnvs.length === 0}
+      disabled={isDisabled}
       color="light"
     >
       Kubeconfig
     </Button>
+  );
+
+  return (
+    <>
+      {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 && (