From 8a66c41c59dad81358f3213b1b2e7f11ef5bf72c Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chaim.levi-ari@portainer.io>
Date: Tue, 30 Apr 2024 12:21:00 +0300
Subject: [PATCH 1/5] feat(docker): label gpu as nvidia only [EE-6999]

fix [EE-6999]
---
 .../docker-features-configuration.html                   | 7 ++++++-
 app/portainer/react/components/index.ts                  | 5 +++++
 app/react/components/Tip/TextTip/TextTip.tsx             | 9 ++++-----
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/docker/views/docker-features-configuration/docker-features-configuration.html b/app/docker/views/docker-features-configuration/docker-features-configuration.html
index 745fd29fc2226..949577da35eac 100644
--- a/app/docker/views/docker-features-configuration/docker-features-configuration.html
+++ b/app/docker/views/docker-features-configuration/docker-features-configuration.html
@@ -164,12 +164,17 @@
                 disabled="!$ctrl.isDockerStandaloneEnv"
               ></por-switch-field>
             </div>
+
+            <div class="col-sm-12">
+              <text-tip children="'GPU support is currently limited to NVIDIA graphics cards only.'" color="'blue'" />
+            </div>
+
             <div class="col-sm-12">
               <div class="pl-4">
                 <gpus-list ng-if="$ctrl.state.enableGPUManagement && $ctrl.endpoint" value="$ctrl.endpoint.Gpus" on-change="($ctrl.onGpusChange)"></gpus-list>
               </div>
             </div>
-            <div class="col-sm-12">
+            <div class="col-sm-12 mt-4">
               <por-switch-field
                 label="'Show image up to date indicators for Stacks, Services and Containers'"
                 checked="false"
diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index 0ba694cbe96b4..a2ec6e69092de 100644
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@@ -37,6 +37,7 @@ import { TagButton } from '@@/TagButton';
 import { BETeaserButton } from '@@/BETeaserButton';
 import { CodeEditor } from '@@/CodeEditor';
 import { HelpLink } from '@@/HelpLink';
+import { TextTip } from '@@/Tip/TextTip';
 
 import { fileUploadField } from './file-upload-field';
 import { switchField } from './switch-field';
@@ -231,6 +232,10 @@ export const ngModule = angular
       'data-cy',
     ])
   )
+  .component(
+    'textTip',
+    r2a(TextTip, ['className', 'color', 'icon', 'inline', 'children'])
+  )
   .component(
     'groupAssociationTable',
     r2a(withReactQuery(GroupAssociationTable), [
diff --git a/app/react/components/Tip/TextTip/TextTip.tsx b/app/react/components/Tip/TextTip/TextTip.tsx
index 24618f594deca..f69c29fd971e7 100644
--- a/app/react/components/Tip/TextTip/TextTip.tsx
+++ b/app/react/components/Tip/TextTip/TextTip.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import { AlertCircle } from 'lucide-react';
 import clsx from 'clsx';
 
@@ -10,8 +10,8 @@ export interface Props {
   icon?: React.ReactNode;
   color?: Color;
   className?: string;
-  childrenWrapperClassName?: string;
   inline?: boolean;
+  children: ReactNode;
 }
 
 export function TextTip({
@@ -20,8 +20,7 @@ export function TextTip({
   inline = true,
   className,
   children,
-  childrenWrapperClassName = 'text-muted',
-}: PropsWithChildren<Props>) {
+}: Props) {
   return (
     <div
       className={clsx(
@@ -33,7 +32,7 @@ export function TextTip({
     >
       <Icon icon={icon} mode={getMode(color)} className="!mt-0.5 flex-none" />
 
-      <span className={childrenWrapperClassName}>{children}</span>
+      <span className="text-muted">{children}</span>
     </div>
   );
 }

From 07dae0e968e5d9b34c6b0b7d20fbf4e8902646f2 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chaim.levi-ari@portainer.io>
Date: Tue, 30 Apr 2024 12:25:46 +0300
Subject: [PATCH 2/5] fix(docker): fix position fo switch

---
 .../docker-features-configuration.html                       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/docker/views/docker-features-configuration/docker-features-configuration.html b/app/docker/views/docker-features-configuration/docker-features-configuration.html
index 949577da35eac..8b724db44dc8e 100644
--- a/app/docker/views/docker-features-configuration/docker-features-configuration.html
+++ b/app/docker/views/docker-features-configuration/docker-features-configuration.html
@@ -174,7 +174,10 @@
                 <gpus-list ng-if="$ctrl.state.enableGPUManagement && $ctrl.endpoint" value="$ctrl.endpoint.Gpus" on-change="($ctrl.onGpusChange)"></gpus-list>
               </div>
             </div>
-            <div class="col-sm-12 mt-4">
+          </div>
+
+          <div class="form-group">
+            <div class="col-sm-12">
               <por-switch-field
                 label="'Show image up to date indicators for Stacks, Services and Containers'"
                 checked="false"

From adc2be802d1ac83dccc68e65a2c9fe6cb30750cf Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chaim.levi-ari@portainer.io>
Date: Tue, 30 Apr 2024 19:53:24 +0300
Subject: [PATCH 3/5] fix(ui/textip): add back children wrapper

---
 app/portainer/react/components/index.ts      | 9 ++++++++-
 app/react/components/Tip/TextTip/TextTip.tsx | 5 +++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index a2ec6e69092de..8f6c235c52f4b 100644
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@@ -234,7 +234,14 @@ export const ngModule = angular
   )
   .component(
     'textTip',
-    r2a(TextTip, ['className', 'color', 'icon', 'inline', 'children'])
+    r2a(TextTip, [
+      'className',
+      'color',
+      'icon',
+      'inline',
+      'children',
+      'childrenWrapperClassName',
+    ])
   )
   .component(
     'groupAssociationTable',
diff --git a/app/react/components/Tip/TextTip/TextTip.tsx b/app/react/components/Tip/TextTip/TextTip.tsx
index f69c29fd971e7..afcace5e65633 100644
--- a/app/react/components/Tip/TextTip/TextTip.tsx
+++ b/app/react/components/Tip/TextTip/TextTip.tsx
@@ -10,6 +10,7 @@ export interface Props {
   icon?: React.ReactNode;
   color?: Color;
   className?: string;
+  childrenWrapperClassName?: string;
   inline?: boolean;
   children: ReactNode;
 }
@@ -20,6 +21,7 @@ export function TextTip({
   inline = true,
   className,
   children,
+  childrenWrapperClassName,
 }: Props) {
   return (
     <div
@@ -31,8 +33,7 @@ export function TextTip({
       role="status"
     >
       <Icon icon={icon} mode={getMode(color)} className="!mt-0.5 flex-none" />
-
-      <span className="text-muted">{children}</span>
+      <span className={childrenWrapperClassName}>{children}</span>
     </div>
   );
 }

From 6d1ddd1afdd53e532cfa0a3150c4c1218c32d818 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chaim.levi-ari@portainer.io>
Date: Thu, 2 May 2024 08:20:27 +0300
Subject: [PATCH 4/5] feat(docker/setup): show nvidia limited only if gpu is
 enabled

---
 .../docker-features-configuration.html            | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/docker/views/docker-features-configuration/docker-features-configuration.html b/app/docker/views/docker-features-configuration/docker-features-configuration.html
index 8b724db44dc8e..f2cd6f709d1a6 100644
--- a/app/docker/views/docker-features-configuration/docker-features-configuration.html
+++ b/app/docker/views/docker-features-configuration/docker-features-configuration.html
@@ -165,13 +165,14 @@
               ></por-switch-field>
             </div>
 
-            <div class="col-sm-12">
-              <text-tip children="'GPU support is currently limited to NVIDIA graphics cards only.'" color="'blue'" />
-            </div>
-
-            <div class="col-sm-12">
-              <div class="pl-4">
-                <gpus-list ng-if="$ctrl.state.enableGPUManagement && $ctrl.endpoint" value="$ctrl.endpoint.Gpus" on-change="($ctrl.onGpusChange)"></gpus-list>
+            <div ng-if="$ctrl.state.enableGPUManagement">
+              <div class="col-sm-12">
+                <text-tip children="'GPU support is currently limited to NVIDIA graphics cards only.'" color="'blue'" />
+              </div>
+              <div class="col-sm-12">
+                <div class="pl-4">
+                  <gpus-list ng-if="$ctrl.state.enableGPUManagement" value="$ctrl.endpoint.Gpus" on-change="($ctrl.onGpusChange)"></gpus-list>
+                </div>
               </div>
             </div>
           </div>

From 30c15ddb8dd97f1aade5e17e9accaff7148debc3 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chaim.levi-ari@portainer.io>
Date: Thu, 2 May 2024 08:40:25 +0300
Subject: [PATCH 5/5] feat(docker/setup): show gpu comment for swarm

---
 .../docker-features-configuration.html                     | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/docker/views/docker-features-configuration/docker-features-configuration.html b/app/docker/views/docker-features-configuration/docker-features-configuration.html
index f2cd6f709d1a6..c6904982f37bc 100644
--- a/app/docker/views/docker-features-configuration/docker-features-configuration.html
+++ b/app/docker/views/docker-features-configuration/docker-features-configuration.html
@@ -150,9 +150,12 @@
           <!-- other -->
           <div class="col-sm-12 form-section-title"> Other </div>
           <div class="form-group">
-            <div class="col-sm-12">
-              <gpus-insights></gpus-insights>
+            <div class="col-sm-12" ng-if="!$ctrl.isDockerStandaloneEnv">
+              <text-tip children="'Showing GPU in the UI is currently only available with Docker Standalone and is limited to NVIDIA graphics cards.'" color="'blue'" />
             </div>
+          </div>
+
+          <div class="form-group">
             <div class="col-sm-12">
               <por-switch-field
                 label="'Show GPU in the UI'"