fix(UI): update icons for beta and experimental features EE-5435 (#8952)

app/assets/ico/beta.svg

@@ -0,0 +1,3 @@
+<svg width="auto" height="auto" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 14.3223V3.49792C1 2.11836 2.11832 1 3.49792 1C4.87753 1 5.99585 2.11836 5.99585 3.49792C5.99585 4.87749 4.87753 5.99585 3.49792 5.99585L3.91425 5.99609C5.52374 5.99609 6.82849 7.30084 6.82849 8.91034C6.82849 10.5198 5.52374 11.8246 3.91425 11.8246C2.30475 11.8246 1 10.5198 1 8.91034" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app/kubernetes/components/helm/helm-templates/helm-templates.html

@@ -1,16 +1,11 @@
 <page-header title="'Helm'" breadcrumbs="['Charts']" reload="true"></page-header>
 
 <information-panel title-text="Information" ng-if="!$ctrl.state.chart">
+  <beta-alert
+    is-html="true"
+    message="'Beta feature - initial version of Helm charts functionality, for more information see this <a href=\'https://www.portainer.io/blog/portainer-now-with-helm-support\' target=\'_blank\' class=\'hyperlink\'>blog post</a>.'"
+  ></beta-alert>
   <span class="small text-muted">
-    <p class="inline-flex flex-row items-center">
-      <pr-icon icon="'info'" class="vertical-center mr-1" mode="'primary'"></pr-icon>
-      This is a first version for Helm charts, for more information see this&nbsp;<a
-        class="hyperlink"
-        href="https://www.portainer.io/blog/portainer-now-with-helm-support"
-        target="_blank"
-        >blog post</a
-      >.</p
-    >
     <p ng-if="$ctrl.state.globalRepository === ''" class="inline-flex items-center">
       <pr-icon icon="'info'"></pr-icon>
       <span>The Global Helm Repository is not configured.</span>
@@ -23,7 +18,7 @@
   <!-- helmchart-form -->
   <div class="col-sm-12" ng-if="$ctrl.state.chart">
     <rd-widget>
-      <div class="toolBarTitle vertical-center text-muted px-5 pt-5">
+      <div class="toolBarTitle vertical-center px-5 pt-5 text-[16px] font-medium">
         <fallback-image src="$ctrl.state.chart.icon" fallback-icon="'svg-helm'" class-name="'h-8 w-8'" size="'lg'"></fallback-image>
         {{ $ctrl.state.chart.name }}
       </div>

app/kubernetes/views/applications/helm/helm.html

@@ -20,10 +20,11 @@
             Release
           </div>
         </div>
-        <div class="toolBarTitle text-muted small vertical-center !gap-0 px-5">
+        <div class="toolBarTitle vertical-center !gap-0 px-5">
-          <pr-icon icon="'info'" mode="'primary'" class-name="'!mr-1'" class="vertical-center"></pr-icon>
+          <beta-alert
-          This is a first version for Helm charts, for more information see this&nbsp;
+            is-html="true"
-          <a href="https://www.portainer.io/blog/portainer-now-with-helm-support" target="_blank" class="hyperlink">blog post</a>.
+            message="'Beta feature - initial version of Helm charts functionality, for more information see this <a href=\'https://www.portainer.io/blog/portainer-now-with-helm-support\' target=\'_blank\' class=\'hyperlink\'>blog post</a>.'"
+          ></beta-alert>
         </div>
         <rd-widget-body>
           <table class="table">

app/portainer/components/beta-panel/betaPanel.html

@@ -1,8 +0,0 @@
-<information-panel title-text="Information">
-  <span class="small">
-    <p class="text-muted">
-      <pr-icon icon="'flask-conical'" mode="'warning'"></pr-icon>
-      This is a beta feature.
-    </p>
-  </span>
-</information-panel>

app/portainer/components/beta-panel/betaPanel.js

@@ -1,3 +0,0 @@
-angular.module('portainer.app').component('betaPanel', {
-  templateUrl: './betaPanel.html',
-});

app/portainer/components/theme/theme-settings.html

@@ -4,11 +4,6 @@
     <rd-widget-body>
       <form class="form-horizontal">
         <box-selector radio-name="'theme'" value="$ctrl.state.themeColor" options="$ctrl.state.availableThemes" on-change="($ctrl.setThemeColor)"></box-selector>
-
-        <p class="vertical-center mt-2">
-          <pr-icon icon="'alert-circle'" class-name="'icon-primary'"></pr-icon>
-          <span class="small">Dark and High-contrast theme are experimental. Some UI components might not display properly.</span>
-        </p>
       </form>
     </rd-widget-body>
   </rd-widget>

app/react/components/Svg.tsx

@@ -36,6 +36,7 @@ import nomadicon from '@/assets/ico/vendor/nomad-icon.svg?c';
 import openldap from '@/assets/ico/vendor/openldap.svg?c';
 import proget from '@/assets/ico/vendor/proget.svg?c';
 import quay from '@/assets/ico/vendor/quay.svg?c';
+import beta from '@/assets/ico/beta.svg?c';
 
 const placeholder = Placeholder;
 
@@ -76,6 +77,7 @@ export const SvgIcons = {
   proget,
   quay,
   kube,
+  beta,
 };
 
 interface SvgProps {

app/react/components/Tip/TextTip/TextTip.tsx

@@ -10,6 +10,7 @@ export interface Props {
   icon?: React.ReactNode;
   color?: Color;
   className?: string;
+  childrenWrapperClassName?: string;
 }
 
 export function TextTip({
@@ -17,11 +18,13 @@ export function TextTip({
   icon = AlertCircle,
   className,
   children,
+  childrenWrapperClassName = 'text-muted',
 }: PropsWithChildren<Props>) {
   return (
-    <div className={clsx('small inline-flex items-center gap-1', className)}>
+    <div className={clsx('small inline-flex gap-1', className)}>
-      <Icon icon={icon} mode={getMode(color)} className="shrink-0" />
+      <Icon icon={icon} mode={getMode(color)} className="!mt-[2px]" />
-      <span className="text-muted">{children}</span>
+
+      <span className={childrenWrapperClassName}>{children}</span>
     </div>
   );
 }

app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx

@@ -55,7 +55,10 @@ function CreateView() {
         breadcrumbs="Edge agent update and rollback"
       />
 
-      <BetaAlert />
+      <BetaAlert
+        className="ml-[15px] mb-2"
+        message="Beta feature - currently limited to standalone Linux and Nomad edge devices."
+      />
 
       <div className="row">
         <div className="col-sm-12">

app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx

@@ -77,7 +77,10 @@ function ItemView() {
         ]}
       />
 
-      <BetaAlert />
+      <BetaAlert
+        className="ml-[15px] mb-2"
+        message="Beta feature - currently limited to standalone Linux and Nomad edge devices."
+      />
 
       <div className="row">
         <div className="col-sm-12">

app/react/portainer/environments/update-schedules/ListView/ListView.tsx

@@ -42,7 +42,10 @@ export function ListView() {
         breadcrumbs="Update and rollback"
       />
 
-      <BetaAlert />
+      <BetaAlert
+        className="ml-[15px] mb-2"
+        message="Beta feature - currently limited to standalone Linux and Nomad edge devices."
+      />
 
       <Datatable
         dataset={listQuery.data}

app/react/portainer/environments/update-schedules/common/BetaAlert.tsx

@@ -1,13 +1,24 @@
-import { InformationPanel } from '@@/InformationPanel';
 import { TextTip } from '@@/Tip/TextTip';
 
-export function BetaAlert() {
+interface Props {
+  message: string;
+  className?: string;
+  isHtml?: boolean;
+}
+
+export function BetaAlert({ message, className, isHtml }: Props) {
   return (
-    <InformationPanel title="Limited Feature">
+    <TextTip
-      <TextTip>
+      icon="svg-beta"
-        This feature is currently in beta and is limited to standalone linux
+      className={className}
-        edge devices.
+      childrenWrapperClassName="text-warning"
-      </TextTip>
+    >
-    </InformationPanel>
+      {!isHtml ? (
+        message
+      ) : (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: message }} />
+      )}
+    </TextTip>
   );
 }

app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Formik, Field, Form } from 'formik';
-import { Laptop } from 'lucide-react';
+import { FlaskConical, Laptop } from 'lucide-react';
 
 import { FDOConfiguration } from '@/portainer/hostmanagement/fdo/model';
 import {
@@ -38,7 +38,7 @@ export function SettingsFDO({ settings, onSubmit }: Props) {
     return (
       <Widget>
         <Widget.Body>
-          <TextTip color="blue">
+          <TextTip color="blue" icon={FlaskConical}>
             Since FDO is still an experimental feature that requires additional
             infrastructure, it has been temporarily hidden in the UI.
           </TextTip>