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

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,12 +18,13 @@ export function TextTip({
   icon = AlertCircle,
   className,
   children,
+  childrenWrapperClassName = 'text-muted',
 }: PropsWithChildren<Props>) {
   return (
     <div className={clsx('small inline-flex gap-1', className)}>
       <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

@@ -40,7 +40,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>
-        This feature is currently in beta and is limited to standalone linux
-        edge devices.
-      </TextTip>
-    </InformationPanel>
+    <TextTip
+      icon="svg-beta"
+      className={className}
+      childrenWrapperClassName="text-warning"
+    >
+      {!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>