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

Co-authored-by: testa113 <testa113>

app/portainer/user-activity/auth-logs-view/auth-logs-view.html

@@ -1,8 +1,8 @@
 <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">
@@ -11,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>

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/logs/ActivityLogsView/ActivityLogsView.tsx

@@ -45,29 +45,30 @@ export function ActivityLogsView() {
       />
 
       <div className="mx-4">
-        <BEOverlay className="m-2" featureId={FeatureId.ACTIVITY_AUDIT}>
-          <FilterBar
-            value={range}
-            onChange={setRange}
-            onExport={handleExport}
-          />
-
-          <div className="-mx-[15px] mt-4">
-            <ActivityLogsTable
-              sort={tableState.sortBy}
-              onChangeSort={(value) =>
-                tableState.setSortBy(value?.id, value?.desc || false)
-              }
-              limit={tableState.pageSize}
-              onChangeLimit={tableState.setPageSize}
-              keyword={tableState.search}
-              onChangeKeyword={tableState.setSearch}
-              currentPage={page}
-              onChangePage={setPage}
-              totalItems={logsQuery.data?.totalCount || 0}
-              dataset={logsQuery.data?.logs}
-            />
+        <BEOverlay variant="multi-widget" featureId={FeatureId.ACTIVITY_AUDIT}>
+          <div className="row">
+            <div className="col-sm-12">
+              <FilterBar
+                value={range}
+                onChange={setRange}
+                onExport={handleExport}
+              />
+            </div>
           </div>
+          <ActivityLogsTable
+            sort={tableState.sortBy}
+            onChangeSort={(value) =>
+              tableState.setSortBy(value?.id, value?.desc || false)
+            }
+            limit={tableState.pageSize}
+            onChangeLimit={tableState.setPageSize}
+            keyword={tableState.search}
+            onChangeKeyword={tableState.setSearch}
+            currentPage={page}
+            onChangePage={setPage}
+            totalItems={logsQuery.data?.totalCount || 0}
+            dataset={logsQuery.data?.logs}
+          />
         </BEOverlay>
       </div>
     </>

app/react/portainer/logs/ActivityLogsView/FilterBar.tsx

@@ -3,9 +3,7 @@ import { DownloadIcon } from 'lucide-react';
 import { Widget } from '@@/Widget';
 import { TextTip } from '@@/Tip/TextTip';
 import { Button } from '@@/buttons';
-import { BEFeatureIndicator } from '@@/BEFeatureIndicator';
 
-import { FeatureId } from '../../feature-flags/enums';
 import { DateRangePicker } from '../components/DateRangePicker';
 
 export function FilterBar({
@@ -37,7 +35,6 @@ export function FilterBar({
             >
               Export as CSV
             </Button>
-            <BEFeatureIndicator featureId={FeatureId.ACTIVITY_AUDIT} />
           </div>
         </form>
       </Widget.Body>

app/react/portainer/logs/components/DateRangePicker.tsx

@@ -24,7 +24,7 @@ export function DateRangePicker({
   error?: FormikErrors<Value>;
 }) {
   return (
-    <FormControl label="Date Range" errors={error}>
+    <FormControl label="Date range" errors={error}>
       <div className="w-1/2">
         <WojtekmajRangePicker
           format="y-MM-dd"

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

@@ -32,7 +32,7 @@ export function BackupS3Form() {
   const updateS3Mutate = useUpdateBackupS3SettingsMutation();
 
   const settingsQuery = useBackupS3Settings({ enabled: isBE });
-  if (settingsQuery.isLoading) {
+  if (settingsQuery.isInitialLoading) {
     return null;
   }
 
@@ -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}