feat(waiting-room): add beta alert to assignment [EE-5384] (#9028)

app/react/components/Svg.tsx

@@ -36,7 +36,6 @@ 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;
 
@@ -77,7 +76,6 @@ export const SvgIcons = {
   proget,
   quay,
   kube,
-  beta,
 };
 
 interface SvgProps {

app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/AssignmentDialog.tsx

@@ -3,6 +3,7 @@ import { Form, Formik } from 'formik';
 import { addPlural } from '@/portainer/helpers/strings';
 import { useUpdateEnvironmentsRelationsMutation } from '@/react/portainer/environments/queries/useUpdateEnvironmentsRelationsMutation';
 import { notifySuccess } from '@/portainer/services/notifications';
+import { BetaAlert } from '@/react/portainer/environments/update-schedules/common/BetaAlert';
 
 import { Checkbox } from '@@/form-components/Checkbox';
 import { FormControl } from '@@/form-components/FormControl';
@@ -146,6 +147,16 @@ export function AssignmentDialog({
                 Associate
               </LoadingButton>
             </Modal.Footer>
+            <div className="mt-2">
+              <BetaAlert
+                message={
+                  <>
+                    <b>Beta Feature</b> - This feature is currently in beta,
+                    some functions might not work as expected.
+                  </>
+                }
+              />
+            </div>
           </Form>
         )}
       </Formik>

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

@@ -1,24 +1,26 @@
+import { ReactNode } from 'react';
+
+import betaIcon from '@/assets/ico/beta.svg?c';
+
 import { TextTip } from '@@/Tip/TextTip';
 
 interface Props {
-  message: string;
+  message: ReactNode;
   className?: string;
   isHtml?: boolean;
 }
 
 export function BetaAlert({ message, className, isHtml }: Props) {
   return (
-    <TextTip
+    <TextTip icon={betaIcon} className={className}>
-      icon="svg-beta"
+      <div className="text-warning">
-      className={className}
+        {isHtml && typeof message === 'string' ? (
-      childrenWrapperClassName="text-warning"
+          // eslint-disable-next-line react/no-danger
-    >
+          <span dangerouslySetInnerHTML={{ __html: message }} />
-      {!isHtml ? (
+        ) : (
-        message
+          message
-      ) : (
+        )}
-        // eslint-disable-next-line react/no-danger
+      </div>
-        <span dangerouslySetInnerHTML={{ __html: message }} />
-      )}
     </TextTip>
   );
 }