From 30248eabb42810ef1c88bd3ca5712065f05ef2a7 Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Thu, 23 Mar 2023 08:20:30 +1300
Subject: [PATCH] fix(apps) UI release fixes [EE-5197] (#8702)

* fix(apps) searchbar flex resizing and insights

* UI fixes

* update stacks datatable

---------

Co-authored-by: testa113 <testa113>
---
 app/docker/react/components/index.ts          |  12 +
 .../applicationsDatatable.html                | 230 +++++++++---------
 .../applicationsStacksDatatable.html          | 189 +++++++-------
 .../components/datatables/datatable.css       |   7 +-
 .../components/InsightsBox/InsightsBox.tsx    |  56 +++--
 5 files changed, 277 insertions(+), 217 deletions(-)

diff --git a/app/docker/react/components/index.ts b/app/docker/react/components/index.ts
index a34888528..fb815b58c 100644
--- a/app/docker/react/components/index.ts
+++ b/app/docker/react/components/index.ts
@@ -14,6 +14,7 @@ import { DockerfileDetails } from '@/react/docker/images/ItemView/DockerfileDeta
 import { HealthStatus } from '@/react/docker/containers/ItemView/HealthStatus';
 import { GpusList } from '@/react/docker/host/SetupView/GpusList';
 import { GpusInsights } from '@/react/docker/host/SetupView/GpusInsights';
+import { InsightsBox } from '@/react/components/InsightsBox';
 
 export const componentsModule = angular
   .module('portainer.docker.react.components', [])
@@ -53,4 +54,15 @@ export const componentsModule = angular
     'gpusList',
     r2a(withControlledInput(GpusList), ['value', 'onChange'])
   )
+  .component(
+    'insightsBox',
+    r2a(InsightsBox, [
+      'header',
+      'content',
+      'setHtmlContent',
+      'insightCloseId',
+      'type',
+      'className',
+    ])
+  )
   .component('gpusInsights', r2a(GpusInsights, [])).name;
diff --git a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
index 25fe51b06..0f4c6935b 100644
--- a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
+++ b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
@@ -1,132 +1,144 @@
 <div class="datatable">
   <!-- toolbar header actions and settings -->
-  <div ng-if="$ctrl.isPrimary" class="toolBar !flex-col gap-1">
-    <div class="toolBar vertical-center w-full flex-wrap !gap-x-5 !gap-y-1 !p-0">
+  <div ng-if="$ctrl.isPrimary" class="toolBar !flex-col !gap-0">
+    <div class="toolBar w-full !items-start !gap-x-5 !p-0">
       <div class="toolBarTitle vertical-center">
         <div class="widget-icon space-right">
           <pr-icon icon="'box'"></pr-icon>
         </div>
         Applications
       </div>
-      <div class="form-group namespaces !mb-0 !mr-0 min-w-[280px]">
-        <div class="input-group">
-          <span class="input-group-addon">
-            <pr-icon icon="'filter'"></pr-icon>
-            Namespace
-          </span>
-          <select
-            class="form-control"
-            ng-model="$ctrl.state.namespace"
-            ng-change="$ctrl.onChangeNamespace()"
-            data-cy="component-namespaceSelect"
-            ng-options="o.Value as (o.Name + (o.IsSystem ? ' - system' : '')) for o in $ctrl.state.namespaces"
-          >
-          </select>
-        </div>
-      </div>
-      <div class="searchBar vertical-center !mr-0 min-w-[280px]">
-        <pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search for an application..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-          data-cy="k8sApp-searchApplicationsInput"
-        />
-      </div>
-      <div class="actionBar !mr-0 !gap-3">
-        <button
-          ng-if="$ctrl.isPrimary"
-          type="button"
-          class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
-          ng-disabled="$ctrl.state.selectedItemCount === 0"
-          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-          data-cy="k8sApp-removeAppButton"
-        >
-          <pr-icon icon="'trash-2'"></pr-icon>
-          Remove
-        </button>
-        <button
-          ng-if="$ctrl.isPrimary"
-          type="button"
-          class="btn btn-sm btn-secondary vertical-center !ml-0 h-fit"
-          ui-sref="kubernetes.applications.new"
-          data-cy="k8sApp-addApplicationButton"
-        >
-          <pr-icon icon="'plus'" class-name="'!h-3'"></pr-icon>Add with form
-        </button>
-        <button
-          ng-if="$ctrl.isPrimary"
-          type="button"
-          class="btn btn-sm btn-primary vertical-center !ml-0 h-fit"
-          ui-sref="kubernetes.deploy"
-          data-cy="k8sApp-deployFromManifestButton"
-        >
-          <pr-icon icon="'plus'" class-name="'!h-3'"></pr-icon>Create from manifest
-        </button>
-      </div>
-      <div class="settings" data-cy="k8sApp-tableSettings">
-        <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-          <span uib-dropdown-toggle aria-label="Settings">
-            <pr-icon icon="'more-vertical'" class-name="'!mr-0 !h-4'"></pr-icon>
-          </span>
-          <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
-            <div class="tableMenu">
-              <div class="menuHeader"> Table settings </div>
-              <div class="menuContent">
-                <div>
-                  <div class="md-checkbox" ng-if="$ctrl.isAdmin">
-                    <input id="applications_setting_show_system" type="checkbox" ng-model="$ctrl.settings.showSystem" ng-change="$ctrl.onSettingsShowSystemChange()" />
-                    <label for="applications_setting_show_system">Show system resources</label>
-                  </div>
-                  <div class="md-checkbox">
-                    <input
-                      id="setting_auto_refresh"
-                      type="checkbox"
-                      ng-model="$ctrl.settings.repeater.autoRefresh"
-                      ng-change="$ctrl.onSettingsRepeaterChange()"
-                      data-cy="k8sApp-autoRefreshCheckbox"
-                    />
-                    <label for="setting_auto_refresh">Auto refresh</label>
-                  </div>
-                  <div ng-if="$ctrl.settings.repeater.autoRefresh">
-                    <label for="settings_refresh_rate"> Refresh rate </label>
-                    <select
-                      id="settings_refresh_rate"
-                      ng-model="$ctrl.settings.repeater.refreshRate"
-                      ng-change="$ctrl.onSettingsRepeaterChange()"
-                      class="small-select"
-                      data-cy="k8sApp-refreshRateDropdown"
-                    >
-                      <option value="10">10s</option>
-                      <option value="30">30s</option>
-                      <option value="60">1min</option>
-                      <option value="120">2min</option>
-                      <option value="300">5min</option>
-                    </select>
-                    <span>
-                      <pr-icon id="refreshRateChange" icon="'check'" mode="'success'" style="display: none"></pr-icon>
-                    </span>
+      <!-- use row reverse to make the left most items wrap first to the right side in the next line -->
+      <div class="inline-flex flex-row-reverse flex-wrap !gap-x-5 gap-y-3">
+        <div class="settings" data-cy="k8sApp-tableSettings">
+          <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
+            <span uib-dropdown-toggle aria-label="Settings">
+              <pr-icon icon="'more-vertical'" class-name="'!mr-0 !h-4'"></pr-icon>
+            </span>
+            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+              <div class="tableMenu">
+                <div class="menuHeader"> Table settings </div>
+                <div class="menuContent">
+                  <div>
+                    <div class="md-checkbox" ng-if="$ctrl.isAdmin">
+                      <input id="applications_setting_show_system" type="checkbox" ng-model="$ctrl.settings.showSystem" ng-change="$ctrl.onSettingsShowSystemChange()" />
+                      <label for="applications_setting_show_system">Show system resources</label>
+                    </div>
+                    <div class="md-checkbox">
+                      <input
+                        id="setting_auto_refresh"
+                        type="checkbox"
+                        ng-model="$ctrl.settings.repeater.autoRefresh"
+                        ng-change="$ctrl.onSettingsRepeaterChange()"
+                        data-cy="k8sApp-autoRefreshCheckbox"
+                      />
+                      <label for="setting_auto_refresh">Auto refresh</label>
+                    </div>
+                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
+                      <label for="settings_refresh_rate"> Refresh rate </label>
+                      <select
+                        id="settings_refresh_rate"
+                        ng-model="$ctrl.settings.repeater.refreshRate"
+                        ng-change="$ctrl.onSettingsRepeaterChange()"
+                        class="small-select"
+                        data-cy="k8sApp-refreshRateDropdown"
+                      >
+                        <option value="10">10s</option>
+                        <option value="30">30s</option>
+                        <option value="60">1min</option>
+                        <option value="120">2min</option>
+                        <option value="300">5min</option>
+                      </select>
+                      <span>
+                        <pr-icon id="refreshRateChange" icon="'check'" mode="'success'" style="display: none"></pr-icon>
+                      </span>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div>
-                <a type="button" class="btn btn-sm btn-default btn-sm" ng-click="$ctrl.settings.open = false;" data-cy="k8sApp-tableSettingsCloseButton">Close</a>
+                <div>
+                  <a type="button" class="btn btn-sm btn-default btn-sm" ng-click="$ctrl.settings.open = false;" data-cy="k8sApp-tableSettingsCloseButton">Close</a>
+                </div>
               </div>
             </div>
+          </span>
+        </div>
+
+        <div class="actionBar !mr-0 !gap-3">
+          <button
+            ng-if="$ctrl.isPrimary"
+            type="button"
+            class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+            data-cy="k8sApp-removeAppButton"
+          >
+            <pr-icon icon="'trash-2'"></pr-icon>
+            Remove
+          </button>
+          <button
+            ng-if="$ctrl.isPrimary"
+            hide-deployment-option="form"
+            type="button"
+            class="btn btn-sm btn-secondary vertical-center !ml-0 h-fit"
+            ui-sref="kubernetes.applications.new"
+            data-cy="k8sApp-addApplicationButton"
+          >
+            <pr-icon icon="'plus'" class-name="'!h-3'"></pr-icon>Add with form
+          </button>
+          <button
+            ng-if="$ctrl.isPrimary"
+            type="button"
+            class="btn btn-sm btn-primary vertical-center !ml-0 h-fit"
+            ui-sref="kubernetes.deploy"
+            data-cy="k8sApp-deployFromManifestButton"
+          >
+            <pr-icon icon="'plus'" class-name="'!h-3'"></pr-icon>Create from manifest
+          </button>
+        </div>
+
+        <div class="searchBar">
+          <pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+            data-cy="k8sApp-searchApplicationsInput"
+          />
+        </div>
+
+        <div class="form-group namespaces !mb-0 !mr-0 !h-[30px] min-w-[140px]">
+          <div class="input-group">
+            <span class="input-group-addon">
+              <pr-icon icon="'filter'" size="'sm'"></pr-icon>
+              Namespace
+            </span>
+            <select
+              class="form-control !h-[30px] !py-1"
+              ng-model="$ctrl.state.namespace"
+              ng-change="$ctrl.onChangeNamespace()"
+              data-cy="component-namespaceSelect"
+              ng-options="o.Value as (o.Name + (o.IsSystem ? ' - system' : '')) for o in $ctrl.state.namespaces"
+            >
+            </select>
           </div>
-        </span>
+        </div>
       </div>
     </div>
     <div class="flex w-full flex-row" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
       <span class="small text-muted vertical-center mt-1">
-        <pr-icon icon="'info'" mode="'primary'" class="vertical-center"></pr-icon>
+        <pr-icon icon="'info'" mode="'primary'"></pr-icon>
         System resources are hidden, this can be changed in the table settings.
       </span>
     </div>
+    <div class="w-full">
+      <div class="w-fit">
+        <insights-box class-name="'mt-2'" type="'slim'" header="'From 2.18 on, you can filter this view by namespace.'" insight-close-id="'k8s-namespace-filtering'"></insights-box>
+      </div>
+    </div>
   </div>
   <!-- data table content -->
   <div ng-class="{ 'table-responsive': $ctrl.isPrimary, 'inner-datatable': !$ctrl.isPrimary }">
diff --git a/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html b/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
index 6a4049feb..da4920b0d 100644
--- a/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
+++ b/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
@@ -1,115 +1,122 @@
 <div class="datatable">
   <!-- table title and action menu -->
-  <div class="toolBar !flex-col gap-1">
-    <div class="toolBar vertical-center w-full flex-wrap !gap-x-5 !gap-y-1 !p-0">
-      <!-- title -->
+  <div class="toolBar !flex-col !gap-0">
+    <div class="toolBar w-full !items-start !gap-x-5 !p-0">
       <div class="toolBarTitle vertical-center">
         <div class="widget-icon space-right">
           <pr-icon icon="'list'"></pr-icon>
         </div>
         Stacks
       </div>
-      <!-- actions -->
-      <div class="form-group namespaces !mb-0 !mr-0 min-w-[280px]">
-        <div class="input-group">
-          <span class="input-group-addon">
-            <pr-icon icon="'filter'"></pr-icon>
-            Namespace
-          </span>
-          <select
-            class="form-control"
-            ng-model="$ctrl.state.namespace"
-            ng-change="$ctrl.onChangeNamespace()"
-            data-cy="component-namespaceSelect"
-            ng-options="o.Value as (o.Name + (o.IsSystem ? ' - system' : '')) for o in $ctrl.state.namespaces"
+      <!-- use row reverse to make the left most items wrap first to the right side in the next line -->
+      <div class="inline-flex flex-row-reverse flex-wrap !gap-x-5 gap-y-3">
+        <div class="actionBar !mr-0 !gap-3">
+          <button
+            type="button"
+            class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+            data-cy="k8sApp-removeStackButton"
           >
-          </select>
-        </div>
-      </div>
-      <div class="searchBar vertical-center">
-        <pr-icon icon="'search'" class-name="'!h-3'"></pr-icon>
-        <input
-          type="text"
-          class="searchInput min-w-min self-start"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search for a stack..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
-      <div class="actionBar !mr-0 !gap-3">
-        <button
-          type="button"
-          class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
-          ng-disabled="$ctrl.state.selectedItemCount === 0"
-          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-          data-cy="k8sApp-removeStackButton"
-        >
-          <pr-icon icon="'trash-2'"></pr-icon>
-          Remove
-        </button>
-        <div class="settings" data-cy="k8sApp-StackTableSettings">
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle>
-              <pr-icon icon="'more-vertical'" class-name="'!mr-0 !h-4'"></pr-icon>
-            </span>
-            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
-              <div class="tableMenu">
-                <div class="menuHeader"> Table settings </div>
-                <div class="menuContent">
-                  <div>
-                    <div class="md-checkbox" ng-if="$ctrl.isAdmin">
-                      <input id="applications_setting_show_system" type="checkbox" ng-model="$ctrl.settings.showSystem" ng-change="$ctrl.onSettingsShowSystemChange()" />
-                      <label for="applications_setting_show_system">Show system resources</label>
-                    </div>
-                    <div class="md-checkbox">
-                      <input
-                        id="setting_auto_refresh"
-                        type="checkbox"
-                        ng-model="$ctrl.settings.repeater.autoRefresh"
-                        ng-change="$ctrl.onSettingsRepeaterChange()"
-                        data-cy="k8sApp-autoRefreshCheckbox-stack"
-                      />
-                      <label for="setting_auto_refresh">Auto refresh</label>
-                    </div>
-                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
-                      <label for="settings_refresh_rate"> Refresh rate </label>
-                      <select
-                        id="settings_refresh_rate"
-                        ng-model="$ctrl.settings.repeater.refreshRate"
-                        ng-change="$ctrl.onSettingsRepeaterChange()"
-                        class="small-select"
-                        data-cy="k8sApp-refreshRateDropdown-stack"
-                      >
-                        <option value="10">10s</option>
-                        <option value="30">30s</option>
-                        <option value="60">1min</option>
-                        <option value="120">2min</option>
-                        <option value="300">5min</option>
-                      </select>
-                      <span>
-                        <pr-icon id="refreshRateChange" icon="'check'" mode="'success'" style="display: none"></pr-icon>
-                      </span>
+            <pr-icon icon="'trash-2'"></pr-icon>
+            Remove
+          </button>
+          <div class="settings" data-cy="k8sApp-StackTableSettings">
+            <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
+              <span uib-dropdown-toggle>
+                <pr-icon icon="'more-vertical'" class-name="'!mr-0 !h-4'"></pr-icon>
+              </span>
+              <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
+                <div class="tableMenu">
+                  <div class="menuHeader"> Table settings </div>
+                  <div class="menuContent">
+                    <div>
+                      <div class="md-checkbox" ng-if="$ctrl.isAdmin">
+                        <input id="applications_setting_show_system" type="checkbox" ng-model="$ctrl.settings.showSystem" ng-change="$ctrl.onSettingsShowSystemChange()" />
+                        <label for="applications_setting_show_system">Show system resources</label>
+                      </div>
+                      <div class="md-checkbox">
+                        <input
+                          id="setting_auto_refresh"
+                          type="checkbox"
+                          ng-model="$ctrl.settings.repeater.autoRefresh"
+                          ng-change="$ctrl.onSettingsRepeaterChange()"
+                          data-cy="k8sApp-autoRefreshCheckbox-stack"
+                        />
+                        <label for="setting_auto_refresh">Auto refresh</label>
+                      </div>
+                      <div ng-if="$ctrl.settings.repeater.autoRefresh">
+                        <label for="settings_refresh_rate"> Refresh rate </label>
+                        <select
+                          id="settings_refresh_rate"
+                          ng-model="$ctrl.settings.repeater.refreshRate"
+                          ng-change="$ctrl.onSettingsRepeaterChange()"
+                          class="small-select"
+                          data-cy="k8sApp-refreshRateDropdown-stack"
+                        >
+                          <option value="10">10s</option>
+                          <option value="30">30s</option>
+                          <option value="60">1min</option>
+                          <option value="120">2min</option>
+                          <option value="300">5min</option>
+                        </select>
+                        <span>
+                          <pr-icon id="refreshRateChange" icon="'check'" mode="'success'" style="display: none"></pr-icon>
+                        </span>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div>
-                  <a type="button" class="btn btn-sm btn-default btn-sm" ng-click="$ctrl.settings.open = false;" data-cy="k8sApp-tableSettingsCloseButton-stack">Close</a>
+                  <div>
+                    <a type="button" class="btn btn-sm btn-default btn-sm" ng-click="$ctrl.settings.open = false;" data-cy="k8sApp-tableSettingsCloseButton-stack">Close</a>
+                  </div>
                 </div>
               </div>
-            </div>
-          </span>
+            </span>
+          </div>
+        </div>
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" class-name="'!h-3'"></pr-icon>
+          <input
+            type="text"
+            class="searchInput min-w-min self-start"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
+
+        <div class="form-group namespaces !mb-0 !mr-0 !h-[30px] w-fit min-w-[140px]">
+          <div class="input-group">
+            <span class="input-group-addon">
+              <pr-icon icon="'filter'" size="'sm'"></pr-icon>
+              Namespace
+            </span>
+            <select
+              class="form-control !h-[30px] !py-1"
+              ng-model="$ctrl.state.namespace"
+              ng-change="$ctrl.onChangeNamespace()"
+              data-cy="component-namespaceSelect"
+              ng-options="o.Value as (o.Name + (o.IsSystem ? ' - system' : '')) for o in $ctrl.state.namespaces"
+            >
+            </select>
+          </div>
         </div>
       </div>
     </div>
     <!-- info text -->
-    <div class="flex w-full flex-row">
-      <span class="small text-muted vertical-center mt-1" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
+    <div class="flex w-full flex-row" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
+      <span class="small text-muted vertical-center mt-1">
         <pr-icon icon="'info'" mode="'primary'"></pr-icon>
         System resources are hidden, this can be changed in the table settings.
       </span>
     </div>
+    <div class="w-full">
+      <div class="w-fit">
+        <insights-box class-name="'mt-2'" type="'slim'" header="'From 2.18 on, you can filter this view by namespace.'" insight-close-id="'k8s-namespace-filtering'"></insights-box>
+      </div>
+    </div>
   </div>
   <div class="table-responsive">
     <table class="table-hover nowrap-cells table">
diff --git a/app/portainer/components/datatables/datatable.css b/app/portainer/components/datatables/datatable.css
index 83ad9f01e..84ca06d88 100644
--- a/app/portainer/components/datatables/datatable.css
+++ b/app/portainer/components/datatables/datatable.css
@@ -66,7 +66,12 @@
 .toolBar .searchBar {
   margin-right: 10px;
   display: inline-flex;
-  min-height: 30px;
+  flex-basis: 7rem;
+  flex-grow: 1;
+  flex-shrink: 1;
+  align-items: center;
+  min-width: 7rem;
+  max-width: 14rem;
 }
 
 .datatable .searchBar input[type='text'] {
diff --git a/app/react/components/InsightsBox/InsightsBox.tsx b/app/react/components/InsightsBox/InsightsBox.tsx
index 552e96042..b294b9815 100644
--- a/app/react/components/InsightsBox/InsightsBox.tsx
+++ b/app/react/components/InsightsBox/InsightsBox.tsx
@@ -8,13 +8,21 @@ import { Button } from '@@/buttons';
 import { insightStore } from './insights-store';
 
 export type Props = {
-  header: string;
-  content: ReactNode;
+  header?: string;
+  content?: ReactNode;
   setHtmlContent?: boolean;
   insightCloseId?: string; // set if you want to be able to close the box and not show it again
+  type?: 'default' | 'slim';
+  className?: string;
 };
 
-export function InsightsBox({ header, content, insightCloseId }: Props) {
+export function InsightsBox({
+  header,
+  content,
+  insightCloseId,
+  type = 'default',
+  className,
+}: 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);
@@ -24,26 +32,42 @@ export function InsightsBox({ header, content, insightCloseId }: Props) {
   }
 
   return (
-    <div className="relative flex w-full gap-1 rounded-lg bg-gray-modern-3 p-4 text-sm th-highcontrast:bg-legacy-grey-3 th-dark:bg-legacy-grey-3">
-      <div className="shrink-0">
+    <div
+      className={clsx(
+        'relative flex w-full gap-1 rounded-lg bg-gray-modern-3 p-4 text-sm th-highcontrast:bg-legacy-grey-3 th-dark:bg-legacy-grey-3',
+        type === 'slim' && 'p-2',
+        className
+      )}
+    >
+      <div className="mt-0.5 shrink-0">
         <Lightbulb className="h-4 text-warning-7 th-highcontrast:text-warning-6 th-dark:text-warning-6" />
       </div>
       <div>
-        <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 className="small">{content}</div>
+        {header && (
+          <p
+            className={clsx(
+              // text-[0.9em] matches .form-horizontal .control-label font-size used in many labels in portainer
+              'align-middle text-[0.9em] font-medium',
+              insightCloseId && 'pr-10',
+              content ? 'mb-2' : 'mb-0'
+            )}
+          >
+            {header}
+          </p>
+        )}
+        {content && (
+          <div className={clsx('small', !header && insightCloseId && 'pr-6')}>
+            {content}
+          </div>
+        )}
       </div>
       {insightCloseId && (
         <Button
           icon={X}
-          className="absolute top-2 right-2 flex !text-gray-7 hover:!text-gray-8 th-highcontrast:!text-gray-6 th-highcontrast:hover:!text-gray-5 th-dark:!text-gray-6 th-dark:hover:!text-gray-5"
+          className={clsx(
+            'absolute top-3 right-2 flex !text-gray-7 hover:!text-gray-8 th-highcontrast:!text-gray-6 th-highcontrast:hover:!text-gray-5 th-dark:!text-gray-6 th-dark:hover:!text-gray-5',
+            type === 'slim' && insightCloseId && 'top-1'
+          )}
           color="link"
           size="medium"
           onClick={() => addInsightIDClosed(insightCloseId)}