fix(be-overlay): consistency overlay with variants [EE-6742] (#11776)

Co-authored-by: testa113 <testa113>

app/react/components/BEFeatureIndicator/BEOverlay.tsx

@@ -5,14 +5,38 @@ import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.ser
 
 import { BEFeatureIndicator } from './BEFeatureIndicator';
 
+type Variants = 'form-section' | 'widget' | 'multi-widget';
+
+type OverlayClasses = {
+  beLinkContainerClassName: string;
+  contentClassName: string;
+};
+
+const variantClassNames: Record<Variants, OverlayClasses> = {
+  'form-section': {
+    beLinkContainerClassName: '',
+    contentClassName: '',
+  },
+  widget: {
+    beLinkContainerClassName: '',
+    // no padding so that the border overlaps the widget border
+    contentClassName: '!p-0',
+  },
+  'multi-widget': {
+    beLinkContainerClassName: 'm-4',
+    // widgets have a mx of 15px and mb of 15px - match this at the top with padding
+    contentClassName: '!p-0 !pt-[15px]',
+  },
+};
+
 export function BEOverlay({
   featureId,
   children,
-  className,
+  variant = 'form-section',
 }: {
   featureId: FeatureId;
   children: React.ReactNode;
-  className?: string;
+  variant?: 'form-section' | 'widget' | 'multi-widget';
 }) {
   const isLimited = isLimitedToBE(featureId);
   if (!isLimited) {
@@ -21,10 +45,22 @@ export function BEOverlay({
 
   return (
     <div className="be-indicator-container limited-be">
-      <div className="limited-be-link vertical-center">
+      <div
+        className={clsx(
+          'limited-be-link vertical-center',
+          variantClassNames[variant].beLinkContainerClassName
+        )}
+      >
         <BEFeatureIndicator featureId={featureId} />
       </div>
-      <div className={clsx('limited-be-content', className)}>{children}</div>
+      <div
+        className={clsx(
+          'limited-be-content',
+          variantClassNames[variant].contentClassName
+        )}
+      >
+        {children}
+      </div>
     </div>
   );
 }

app/react/portainer/settings/SettingsView/BackupSettingsView/BackupS3Form.tsx

@@ -58,7 +58,10 @@ export function BackupS3Form() {
       validateOnMount
     >
       {({ values, errors, isSubmitting, setFieldValue, isValid }) => (
-        <BEOverlay featureId={FeatureId.S3_BACKUP_SETTING}>
+        <BEOverlay
+          featureId={FeatureId.S3_BACKUP_SETTING}
+          variant="form-section"
+        >
           <Form className="form-horizontal">
             <div className="form-group">
               <div className="col-sm-12">

app/react/portainer/settings/SettingsView/BackupSettingsView/BackupSettingsPanel.tsx

@@ -12,6 +12,8 @@ import { BackupS3Form } from './BackupS3Form';
 export function BackupSettingsPanel() {
   const [backupType, setBackupType] = useState(options[0].value);
 
+  console.log(backupType);
+
   return (
     <Widget>
       <WidgetTitle icon={Download} title="Back up Portainer" />

app/react/portainer/settings/SettingsView/HelmCertPanel.tsx

@@ -30,7 +30,7 @@ export function HelmCertPanel() {
   };
 
   return (
-    <BEOverlay featureId={FeatureId.CA_FILE} className="!p-0">
+    <BEOverlay featureId={FeatureId.CA_FILE} variant="widget">
       <Widget>
         <Widget.Title
           icon={Key}