From ae705bc2458808fe1b842e14eb188702ee07a72e Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Tue, 7 May 2024 16:16:52 +1200
Subject: [PATCH] fix(be-overlay): consistency overlay with variants [EE-6742]
 (#11775)

Co-authored-by: testa113 <testa113>
---
 .../activity-logs-view.html                   | 86 ++++++++++---------
 .../auth-logs-view/auth-logs-view.html        |  9 +-
 .../BEFeatureIndicator/BEOverlay.tsx          | 44 +++++++++-
 .../BackupSettingsView/BackupS3Form.tsx       |  5 +-
 .../BackupSettingsPanel.tsx                   |  2 +
 .../settings/SettingsView/HelmCertPanel.tsx   |  2 +-
 6 files changed, 98 insertions(+), 50 deletions(-)

diff --git a/app/portainer/user-activity/activity-logs-view/activity-logs-view.html b/app/portainer/user-activity/activity-logs-view/activity-logs-view.html
index 6fa46014a..9fdeab384 100644
--- a/app/portainer/user-activity/activity-logs-view/activity-logs-view.html
+++ b/app/portainer/user-activity/activity-logs-view/activity-logs-view.html
@@ -1,46 +1,52 @@
 <page-header title="'User activity logs'" breadcrumbs="['User activity logs']" reload="true"> </page-header>
 
-<div class="be-indicator-container limited-be mx-4">
-  <div>
-    <div class="limited-be-link vertical-center"><be-feature-indicator class="m-2" feature="$ctrl.limitedFeature"></be-feature-indicator></div>
-    <div class="limited-be-content">
-      <rd-widget>
-        <rd-widget-body>
-          <div class="form-horizontal">
-            <div class="form-group">
-              <label for="dateRangeInput" class="col-sm-2 control-label text-left">Date Range</label>
-              <div class="col-sm-6">
-                <input type="text" class="form-control" disabled />
+<div class="mx-4">
+  <div class="be-indicator-container limited-be">
+    <div class="limited-be-link vertical-center m-4"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
+    <div class="limited-be-content !p-0 !pt-[15px]">
+      <div class="row">
+        <div class="col-sm-12">
+          <rd-widget>
+            <rd-widget-body>
+              <div class="form-horizontal">
+                <div class="form-group">
+                  <label for="dateRangeInput" class="col-sm-2 control-label text-left">Date range</label>
+                  <div class="col-sm-6">
+                    <input type="text" class="form-control" disabled />
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <p class="text-muted small vertical-center">
-            <pr-icon icon="'info'" class-name="'icon icon-sm icon-primary'"></pr-icon>
-            Portainer user activity logs have a maximum retention of 7 days.
-          </p>
-          <div>
-            <button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled>
-              <pr-icon icon="'download'" class-name="'icon icon-sm'"></pr-icon>
-              Export as CSV
-            </button>
-          </div>
-        </rd-widget-body>
-      </rd-widget>
-      <div class="row mt-5">
-        <activity-logs-datatable
-          logs="$ctrl.state.logs"
-          keyword="$ctrl.state.keyword"
-          sort="$ctrl.state.sort"
-          limit="$ctrl.state.limit"
-          context-filter="$ctrl.state.contextFilter"
-          total-items="$ctrl.state.totalItems"
-          current-page="$ctrl.state.currentPage"
-          feature="{{:: $ctrl.limitedFeature}}"
-          on-change-keyword="($ctrl.onChangeKeyword)"
-          on-change-sort="($ctrl.onChangeSort)"
-          on-change-limit="($ctrl.onChangeLimit)"
-          on-change-page="($ctrl.onChangePage)"
-        ></activity-logs-datatable>
+              <p class="text-muted small vertical-center">
+                <pr-icon icon="'info'" class-name="'icon icon-sm icon-primary'"></pr-icon>
+                Portainer user activity logs have a maximum retention of 7 days.
+              </p>
+              <div>
+                <button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled>
+                  <pr-icon icon="'download'" class-name="'icon icon-sm'"></pr-icon>
+                  Export as CSV
+                </button>
+              </div>
+            </rd-widget-body>
+          </rd-widget>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-12">
+          <activity-logs-datatable
+            logs="$ctrl.state.logs"
+            keyword="$ctrl.state.keyword"
+            sort="$ctrl.state.sort"
+            limit="$ctrl.state.limit"
+            context-filter="$ctrl.state.contextFilter"
+            total-items="$ctrl.state.totalItems"
+            current-page="$ctrl.state.currentPage"
+            feature="{{:: $ctrl.limitedFeature}}"
+            on-change-keyword="($ctrl.onChangeKeyword)"
+            on-change-sort="($ctrl.onChangeSort)"
+            on-change-limit="($ctrl.onChangeLimit)"
+            on-change-page="($ctrl.onChangePage)"
+          ></activity-logs-datatable>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-view.html b/app/portainer/user-activity/auth-logs-view/auth-logs-view.html
index 6d8081b4c..6daf72066 100644
--- a/app/portainer/user-activity/auth-logs-view/auth-logs-view.html
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-view.html
@@ -1,8 +1,9 @@
 <page-header title="'User authentication logs'" breadcrumbs="['User authentication logs']" reload="true"> </page-header>
 
-<div class="be-indicator-container limited-be mx-4">
-  <div>
-    <div class="limited-be-link vertical-center"><be-feature-indicator class="m-4" feature="$ctrl.limitedFeature"></be-feature-indicator></div>
+<div class="mx-4">
+  <div class="be-indicator-container limited-be">
+    <div class="limited-be-link vertical-center m-4"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
+    <!-- 15px matches the padding for col-sm-12 for the widget and table -->
     <div class="limited-be-content !p-0 !pt-[15px]">
       <div class="row">
         <div class="col-sm-12">
@@ -10,7 +11,7 @@
             <rd-widget-body>
               <div class="form-horizontal">
                 <div class="form-group">
-                  <label for="dateRangeInput" class="col-sm-2 control-label text-left">Date Range</label>
+                  <label for="dateRangeInput" class="col-sm-2 control-label text-left">Date range</label>
                   <div class="col-sm-6">
                     <input type="text" class="form-control" disabled />
                   </div>
diff --git a/app/react/components/BEFeatureIndicator/BEOverlay.tsx b/app/react/components/BEFeatureIndicator/BEOverlay.tsx
index 41765930c..fcdddd980 100644
--- a/app/react/components/BEFeatureIndicator/BEOverlay.tsx
+++ b/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>
   );
 }
diff --git a/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupS3Form.tsx b/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupS3Form.tsx
index 7368013df..ad1f8b962 100644
--- a/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupS3Form.tsx
+++ b/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">
diff --git a/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupSettingsPanel.tsx b/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupSettingsPanel.tsx
index 107e6b6e6..b1cd423a5 100644
--- a/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupSettingsPanel.tsx
+++ b/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" />
diff --git a/app/react/portainer/settings/SettingsView/HelmCertPanel.tsx b/app/react/portainer/settings/SettingsView/HelmCertPanel.tsx
index bc2301802..2fa00c3b4 100644
--- a/app/react/portainer/settings/SettingsView/HelmCertPanel.tsx
+++ b/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}