refactor(GPU): refactor to colocate and simplify UI work [EE-5127] (#8593)

* refactor to colocate and simplify

* fix(insights): text size to match portainer views

---------

Co-authored-by: testa113 <testa113>

app/docker/react/components/index.ts

@@ -1,6 +1,7 @@
 import angular from 'angular';
 
 import { r2a } from '@/react-tools/react2angular';
+import { withControlledInput } from '@/react-tools/withControlledInput';
 import { StackContainersDatatable } from '@/react/docker/stacks/ItemView/StackContainersDatatable';
 import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions';
 import { TemplateListDropdownAngular } from '@/react/docker/app-templates/TemplateListDropdown';
@@ -11,6 +12,8 @@ import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 import { DockerfileDetails } from '@/react/docker/images/ItemView/DockerfileDetails';
 import { HealthStatus } from '@/react/docker/containers/ItemView/HealthStatus';
+import { GpusList } from '@/react/docker/host/SetupView/GpusList';
+import { GpusInsights } from '@/react/docker/host/SetupView/GpusInsights';
 
 export const componentsModule = angular
   .module('portainer.docker.react.components', [])
@@ -45,4 +48,9 @@ export const componentsModule = angular
       'usedAllGpus',
       'enableGpuManagement',
     ])
-  ).name;
+  )
+  .component(
+    'gpusList',
+    r2a(withControlledInput(GpusList), ['value', 'onChange'])
+  )
+  .component('gpusInsights', r2a(GpusInsights, [])).name;

app/docker/views/docker-features-configuration/docker-features-configuration.html

@@ -151,21 +151,7 @@
           <div class="col-sm-12 form-section-title"> Other </div>
           <div class="form-group">
             <div class="col-sm-12 pb-3">
-              <insights-box
-                header="'GPU settings update'"
-                set-html-content="true"
-                insight-close-id="'gpu-settings-update-closed'"
-                content="'
-                  <p>
-                    From 2.18 on, the set-up of available GPUs for a Docker Standalone environment has been shifted from Add environment and Environment details to Host -> Setup, so as to align with other settings.
-                  </p>
-                  <p>
-                    A toggle has been introduced for enabling/disabling management of GPU settings in the Portainer UI - to alleviate the performance impact of showing those settings.
-                  </p>
-                  <p>
-                    The UI has been updated to clarify that GPU settings support is only for Docker Standalone (and not Docker Swarm, which was never supported in the UI).
-                  </p>'"
-              ></insights-box>
+              <gpus-insights></gpus-insights>
             </div>
             <div class="col-sm-12">
               <por-switch-field

app/portainer/react/components/environments.ts

@@ -1,16 +1,13 @@
 import angular from 'angular';
 
 import { r2a } from '@/react-tools/react2angular';
-import { withControlledInput } from '@/react-tools/withControlledInput';
 import { EdgeKeyDisplay } from '@/react/portainer/environments/ItemView/EdgeKeyDisplay';
 import { KVMControl } from '@/react/portainer/environments/KvmView/KVMControl';
-import { GpusList } from '@/react/docker/host/SetupView/GpusList';
 
 export const environmentsModule = angular
   .module('portainer.app.react.components.environments', [])
   .component('edgeKeyDisplay', r2a(EdgeKeyDisplay, ['edgeKey']))
-  .component('kvmControl', r2a(KVMControl, ['deviceId', 'server', 'token']))
   .component(
-    'gpusList',
-    r2a(withControlledInput(GpusList), ['value', 'onChange'])
+    'kvmControl',
+    r2a(KVMControl, ['deviceId', 'server', 'token'])
   ).name;

app/portainer/react/components/index.ts

@@ -26,7 +26,6 @@ import { Slider } from '@@/form-components/Slider';
 import { TagButton } from '@@/TagButton';
 import { BETeaserButton } from '@@/BETeaserButton';
 import { CodeEditor } from '@@/CodeEditor';
-import { InsightsBox } from '@@/InsightsBox';
 
 import { fileUploadField } from './file-upload-field';
 import { switchField } from './switch-field';
@@ -80,10 +79,6 @@ export const componentsModule = angular
   .component('badge', r2a(Badge, ['type', 'className']))
   .component('fileUploadField', fileUploadField)
   .component('porSwitchField', switchField)
-  .component(
-    'insightsBox',
-    r2a(InsightsBox, ['header', 'content', 'setHtmlContent', 'insightCloseId'])
-  )
   .component(
     'passwordCheckHint',
     r2a(withReactQuery(PasswordCheckHint), [

app/portainer/views/endpoints/edit/endpoint.html

@@ -211,22 +211,7 @@
           <!-- !open-amt info -->
           <!-- gpus info -->
           <div class="mb-4">
-            <insights-box
-              ng-if="isDockerStandaloneEnv"
-              header="'GPU settings update'"
-              set-html-content="true"
-              insight-close-id="'gpu-settings-update-closed'"
-              content="'
-                  <p>
-                    From 2.18 on, the set-up of available GPUs for a Docker Standalone environment has been shifted from Add environment and Environment details to Host -> Setup, so as to align with other settings.
-                  </p>
-                  <p>
-                    A toggle has been introduced for enabling/disabling management of GPU settings in the Portainer UI - to alleviate the performance impact of showing those settings.
-                  </p>
-                  <p>
-                    The UI has been updated to clarify that GPU settings support is only for Docker Standalone (and not Docker Swarm, which was never supported in the UI).
-                  </p>'"
-            ></insights-box>
+            <gpus-insights></gpus-insights>
           </div>
           <!-- gpus info -->
           <div class="form-group">

app/react/components/InsightsBox/InsightsBox.tsx

@@ -1,7 +1,6 @@
 import clsx from 'clsx';
 import { Lightbulb, X } from 'lucide-react';
-import { ReactNode, useMemo } from 'react';
-import sanitize from 'sanitize-html';
+import { ReactNode } from 'react';
 import { useStore } from 'zustand';
 
 import { Button } from '@@/buttons';
@@ -15,25 +14,11 @@ export type Props = {
   insightCloseId?: string; // set if you want to be able to close the box and not show it again
 };
 
-export function InsightsBox({
-  header,
-  content,
-  setHtmlContent,
-  insightCloseId,
-}: Props) {
+export function InsightsBox({ header, content, insightCloseId }: Props) {
   // allow to close the box and not show it again in local storage with zustand
   const { addInsightIDClosed, isClosed } = useStore(insightStore);
   const isInsightClosed = isClosed(insightCloseId);
 
-  // allow angular views to set html messages for the insights box
-  const htmlContent = useMemo(() => {
-    if (setHtmlContent && typeof content === 'string') {
-      // eslint-disable-next-line react/no-danger
-      return <div dangerouslySetInnerHTML={{ __html: sanitize(content) }} />;
-    }
-    return null;
-  }, [setHtmlContent, content]);
-
   if (isInsightClosed) {
     return null;
   }
@@ -44,10 +29,16 @@ export function InsightsBox({
         <Lightbulb className="h-4 text-warning-7 th-highcontrast:text-warning-6 th-dark:text-warning-6" />
       </div>
       <div>
-        <p className={clsx('mb-2 font-bold', insightCloseId && 'pr-4')}>
+        <p
+          className={clsx(
+            // text-[0.9em] matches .form-horizontal .control-label font-size used in many labels in portainer
+            'mb-2 text-[0.9em] font-medium',
+            insightCloseId && 'pr-4'
+          )}
+        >
           {header}
         </p>
-        <div>{htmlContent || content}</div>
+        <div className="small">{content}</div>
       </div>
       {insightCloseId && (
         <Button

app/react/docker/host/SetupView/GpusInsights.tsx

@@ -0,0 +1,29 @@
+import { InsightsBox } from '@@/InsightsBox';
+
+export function GpusInsights() {
+  return (
+    <InsightsBox
+      content={
+        <>
+          <p>
+            From 2.18 on, the set-up of available GPUs for a Docker Standalone
+            environment has been shifted from Add environment and Environment
+            details to Host -&gt; Setup, so as to align with other settings.
+          </p>
+          <p>
+            A toggle has been introduced for enabling/disabling management of
+            GPU settings in the Portainer UI - to alleviate the performance
+            impact of showing those settings.
+          </p>
+          <p>
+            The UI has been updated to clarify that GPU settings support is only
+            for Docker Standalone (and not Docker Swarm, which was never
+            supported in the UI).
+          </p>
+        </>
+      }
+      header="GPU settings update"
+      insightCloseId="gpu-settings-update-closed"
+    />
+  );
+}