fix(be-teaser): mute styles [EE-6035] (#10349)

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx

@@ -81,7 +81,7 @@ export function KubeConfigTeaserForm() {
           <div className="form-group">
             <div className="col-sm-12">
               <LoadingButton
-                className="wizard-connect-button"
+                className="wizard-connect-button !ml-0"
                 loadingText="Connecting environment..."
                 isLoading={false}
                 disabled

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx

@@ -11,7 +11,7 @@ import EdgeAgentAsyncIcon from '@/react/edge/components/edge-agent-async.svg?c';
 
 import { BoxSelectorOption } from '@@/BoxSelector/types';
 import { BoxSelector } from '@@/BoxSelector';
-import { BEFeatureIndicator } from '@@/BEFeatureIndicator';
+import { BEOverlay } from '@@/BEFeatureIndicator/BEOverlay';
 
 import { AnalyticsStateKey } from '../types';
 import { EdgeAgentTab } from '../shared/EdgeAgentTab';
@@ -112,11 +112,10 @@ export function WizardKubernetes({ onCreate }: Props) {
         );
       case 'kubeconfig':
         return (
-          <div className="border border-solid border-orange-1 px-1 py-5">
-            <BEFeatureIndicator
-              featureId={options.find((o) => o.value === type)?.feature}
-            />
-            <KubeConfigTeaserForm />
+          <div className="mb-3">
+            <BEOverlay featureId={FeatureId.K8S_CREATE_FROM_KUBECONFIG}>
+              <KubeConfigTeaserForm />
+            </BEOverlay>
           </div>
         );
       default:

app/react/portainer/feature-flags/feature-flags.css

@@ -10,17 +10,19 @@ button.limited-be,
 button[disabled].limited-be.oauth-save-settings-button {
   background-color: var(--BE-only);
   border-color: var(--BE-only);
+  margin-left: 0px;
 }
 
 button.limited-be.oauth-save-settings-button {
   background-color: var(--blue-2);
   border-color: transparent;
+  margin-left: 0px;
 }
 
 ng-form.limited-be,
 form.limited-be,
 div.limited-be {
-  border: solid 2px var(--BE-only);
+  border: solid 1px var(--BE-only);
   border-radius: 8px;
   pointer-events: none;
   touch-action: none;
@@ -28,49 +30,31 @@ div.limited-be {
 }
 
 .limited-be-content {
-  background: rgba(247, 144, 9, 0.1);
-  opacity: 0.5;
-  padding: 10px;
+  @apply border-gray-6 p-2.5 text-xs opacity-50;
 }
 
 .limited-be-link {
+  padding: 10px;
+  width: inherit;
   z-index: 5;
   position: relative;
-  width: 270px;
-  height: 40px;
   top: 0px;
   right: 0px;
   float: right;
   border-top-right-radius: 8px;
   border-bottom-left-radius: 8px;
-
-  @apply bg-warning-5 text-warning-9;
-  @apply th-dark:bg-[color:var(--bg-BE-only)] th-dark:text-blue-8;
-
-  padding: 5px 10px;
   touch-action: auto;
   cursor: hand;
   pointer-events: auto;
 }
 
 .limited-be-link a {
-  @apply pointer-events-auto cursor-pointer;
-  @apply text-warning-9 th-dark:text-blue-8;
+  @apply text-gray-6;
 }
 
 .limited-be-link a:hover {
-  @apply text-warning-9 underline th-dark:text-blue-8;
-}
-
-.overlay {
-  @apply bg-center bg-no-repeat;
-  @apply bg-[url(~@/assets/ico/lock.svg)] th-dark:bg-[url(~@/assets/ico/lock-2.svg)];
-}
-
-.limited-be input,
-.limited-be .widget-body {
-  background: rgba(247, 144, 9, 0.05);
-  @apply th-dark:bg-[color:var(--bg-BE-only)];
+  @apply underline;
+  @apply border-blue-9 text-blue-9;
 }
 
 .form-control.limited-be[disabled] {

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

@@ -13,6 +13,7 @@ import { FormControl } from '@@/form-components/FormControl';
 import { LoadingButton } from '@@/buttons/LoadingButton';
 import { Input } from '@@/form-components/Input';
 import { SwitchField } from '@@/form-components/SwitchField';
+import { BEOverlay } from '@@/BEFeatureIndicator/BEOverlay';
 
 import {
   useBackupS3Settings,
@@ -57,159 +58,159 @@ export function BackupS3Form() {
       validateOnMount
     >
       {({ values, errors, isSubmitting, setFieldValue, isValid }) => (
-        <Form className="form-horizontal">
-          <div className="form-group">
-            <div className="col-sm-12">
-              <SwitchField
-                name="schedule-automatic-backup"
-                labelClass="col-sm-3 col-lg-2"
-                label="Schedule automatic backups"
-                checked={values.scheduleAutomaticBackup}
-                featureId={FeatureId.S3_BACKUP_SETTING}
-                onChange={(e) => setFieldValue('scheduleAutomaticBackup', e)}
-              />
+        <BEOverlay featureId={FeatureId.S3_BACKUP_SETTING}>
+          <Form className="form-horizontal">
+            <div className="form-group">
+              <div className="col-sm-12">
+                <SwitchField
+                  name="schedule-automatic-backup"
+                  labelClass="col-sm-3 col-lg-2"
+                  label="Schedule automatic backups"
+                  checked={values.scheduleAutomaticBackup}
+                  onChange={(e) => setFieldValue('scheduleAutomaticBackup', e)}
+                />
+              </div>
             </div>
-          </div>
 
-          {values.scheduleAutomaticBackup && (
+            {values.scheduleAutomaticBackup && (
+              <FormControl
+                inputId="cron_rule"
+                label="Cron rule"
+                size="small"
+                errors={errors.cronRule}
+                required
+              >
+                <Field
+                  id="cron_rule"
+                  name="cronRule"
+                  type="text"
+                  as={Input}
+                  placeholder="0 2 * * *"
+                  data-cy="settings-backupCronRuleInput"
+                  className={clsx({ 'limited-be': limitedToBE })}
+                  disabled={limitedToBE}
+                />
+              </FormControl>
+            )}
+
             <FormControl
-              inputId="cron_rule"
-              label="Cron rule"
-              size="small"
-              errors={errors.cronRule}
-              required
+              label="Access key ID"
+              inputId="access_key_id"
+              errors={errors.accessKeyID}
             >
               <Field
-                id="cron_rule"
-                name="cronRule"
+                id="access_key_id"
+                name="accessKeyID"
                 type="text"
                 as={Input}
-                placeholder="0 2 * * *"
-                data-cy="settings-backupCronRuleInput"
+                data-cy="settings-accessKeyIdInput"
                 className={clsx({ 'limited-be': limitedToBE })}
                 disabled={limitedToBE}
               />
             </FormControl>
-          )}
 
-          <FormControl
-            label="Access key ID"
-            inputId="access_key_id"
-            errors={errors.accessKeyID}
-          >
-            <Field
-              id="access_key_id"
-              name="accessKeyID"
-              type="text"
-              as={Input}
-              data-cy="settings-accessKeyIdInput"
-              className={clsx({ 'limited-be': limitedToBE })}
+            <FormControl
+              label="Secret access key"
+              inputId="secret_access_key"
+              errors={errors.secretAccessKey}
+            >
+              <Field
+                id="secret_access_key"
+                name="secretAccessKey"
+                type="password"
+                as={Input}
+                data-cy="settings-secretAccessKeyInput"
+                className={clsx({ 'limited-be': limitedToBE })}
+                disabled={limitedToBE}
+              />
+            </FormControl>
+
+            <FormControl label="Region" inputId="region" errors={errors.region}>
+              <Field
+                id="region"
+                name="region"
+                type="text"
+                as={Input}
+                placeholder="default region is us-east-1 if left empty"
+                data-cy="settings-backupRegionInput"
+                className={clsx({ 'limited-be': limitedToBE })}
+                disabled={limitedToBE}
+              />
+            </FormControl>
+
+            <FormControl
+              label="Bucket name"
+              inputId="bucket_name"
+              errors={errors.bucketName}
+            >
+              <Field
+                id="bucket_name"
+                name="bucketName"
+                type="text"
+                as={Input}
+                data-cy="settings-backupBucketNameInput"
+                className={clsx({ 'limited-be': limitedToBE })}
+                disabled={limitedToBE}
+              />
+            </FormControl>
+
+            <FormControl
+              label="S3 compatible host"
+              inputId="s3_compatible_host"
+              tooltip="Hostname of a S3 service"
+              errors={errors.s3CompatibleHost}
+            >
+              <Field
+                id="s3_compatible_host"
+                name="s3CompatibleHost"
+                type="text"
+                as={Input}
+                placeholder="leave empty for AWS S3"
+                data-cy="settings-backupS3CompatibleHostInput"
+                className={clsx({ 'limited-be': limitedToBE })}
+                disabled={limitedToBE}
+              />
+            </FormControl>
+
+            <SecurityFieldset
+              switchDataCy="settings-passwordProtectToggleS3"
+              inputDataCy="settings-backups3pw"
               disabled={limitedToBE}
             />
-          </FormControl>
 
-          <FormControl
-            label="Secret access key"
-            inputId="secret_access_key"
-            errors={errors.secretAccessKey}
-          >
-            <Field
-              id="secret_access_key"
-              name="secretAccessKey"
-              type="password"
-              as={Input}
-              data-cy="settings-secretAccessKeyInput"
-              className={clsx({ 'limited-be': limitedToBE })}
-              disabled={limitedToBE}
-            />
-          </FormControl>
-
-          <FormControl label="Region" inputId="region" errors={errors.region}>
-            <Field
-              id="region"
-              name="region"
-              type="text"
-              as={Input}
-              placeholder="default region is us-east-1 if left empty"
-              data-cy="settings-backupRegionInput"
-              className={clsx({ 'limited-be': limitedToBE })}
-              disabled={limitedToBE}
-            />
-          </FormControl>
-
-          <FormControl
-            label="Bucket name"
-            inputId="bucket_name"
-            errors={errors.bucketName}
-          >
-            <Field
-              id="bucket_name"
-              name="bucketName"
-              type="text"
-              as={Input}
-              data-cy="settings-backupBucketNameInput"
-              className={clsx({ 'limited-be': limitedToBE })}
-              disabled={limitedToBE}
-            />
-          </FormControl>
-
-          <FormControl
-            label="S3 compatible host"
-            inputId="s3_compatible_host"
-            tooltip="Hostname of a S3 service"
-            errors={errors.s3CompatibleHost}
-          >
-            <Field
-              id="s3_compatible_host"
-              name="s3CompatibleHost"
-              type="text"
-              as={Input}
-              placeholder="leave empty for AWS S3"
-              data-cy="settings-backupS3CompatibleHostInput"
-              className={clsx({ 'limited-be': limitedToBE })}
-              disabled={limitedToBE}
-            />
-          </FormControl>
-
-          <SecurityFieldset
-            switchDataCy="settings-passwordProtectToggleS3"
-            inputDataCy="settings-backups3pw"
-            disabled={limitedToBE}
-          />
-
-          <div className="form-group">
-            <div className="col-sm-12">
-              <LoadingButton
-                type="button"
-                loadingText="Exporting..."
-                isLoading={isSubmitting}
-                className={clsx('!ml-0', { 'limited-be': limitedToBE })}
-                disabled={!isValid || limitedToBE}
-                data-cy="settings-exportBackupS3Button"
-                icon={Upload}
-                onClick={() => {
-                  handleExport(values);
-                }}
-              >
-                Export backup
-              </LoadingButton>
+            <div className="form-group">
+              <div className="col-sm-12">
+                <LoadingButton
+                  type="button"
+                  loadingText="Exporting..."
+                  isLoading={isSubmitting}
+                  className={clsx('!ml-0', { 'limited-be': limitedToBE })}
+                  disabled={!isValid || limitedToBE}
+                  data-cy="settings-exportBackupS3Button"
+                  icon={Upload}
+                  onClick={() => {
+                    handleExport(values);
+                  }}
+                >
+                  Export backup
+                </LoadingButton>
+              </div>
             </div>
-          </div>
-          <div className="form-group">
-            <hr />
-            <div className="col-sm-12">
-              <LoadingButton
-                loadingText="Saving settings..."
-                isLoading={isSubmitting}
-                className={clsx('!ml-0', { 'limited-be': limitedToBE })}
-                disabled={!isValid || limitedToBE}
-                data-cy="settings-saveBackupSettingsButton"
-              >
-                Save backup settings
-              </LoadingButton>
+            <div className="form-group">
+              <div className="col-sm-12">
+                <LoadingButton
+                  loadingText="Saving settings..."
+                  isLoading={isSubmitting}
+                  className={clsx('!ml-0', { 'limited-be': limitedToBE })}
+                  disabled={!isValid || limitedToBE}
+                  data-cy="settings-saveBackupSettingsButton"
+                >
+                  Save backup settings
+                </LoadingButton>
+              </div>
             </div>
-          </div>
-        </Form>
+          </Form>
+        </BEOverlay>
       )}
     </Formik>
   );

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

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