fix(teasers): updated muted styles from qa feedback [EE-6035] (#10390)

* fix(teasers): updated muted styles from qa feedback [EE-6035]

app/react/components/BEFeatureIndicator/BEFeatureIndicator.css

@@ -1,6 +1,6 @@
 .be-indicator {
-  @apply border-solid border border-gray-6;
-  @apply text-gray-6 text-xs;
+  @apply border border-solid border-gray-6;
+  @apply text-xs text-gray-6;
   border-radius: 15px;
   padding: 5px 10px;
   font-weight: 400;
@@ -23,5 +23,5 @@
 }
 
 .be-indicator-container {
-  @apply border-solid border border-gray-6;
+  @apply relative;
 }

app/react/components/BoxSelector/BoxSelectorItem.tsx

@@ -57,7 +57,13 @@ export function BoxSelectorItem<T extends Value>({
       type={type}
       checkIcon={checkIcon}
     >
-      {limitedToBE && <LimitedToBeBoxSelectorIndicator url={featureUrl} />}
+      {limitedToBE && (
+        <LimitedToBeBoxSelectorIndicator
+          url={featureUrl}
+          // show tooltip only for radio type options because be-only checkbox options can't be selected
+          showTooltip={type === 'radio'}
+        />
+      )}
       <div
         className={clsx('flex min-w-[140px] gap-2', {
           'opacity-30': limitedToBE,

app/react/components/BoxSelector/LimitedToBeBoxSelectorIndicator.tsx

@@ -5,9 +5,13 @@ import { Tooltip } from '@@/Tip/Tooltip';
 
 interface Props {
   url?: string;
+  showTooltip?: boolean;
 }
 
-export function LimitedToBeBoxSelectorIndicator({ url }: Props) {
+export function LimitedToBeBoxSelectorIndicator({
+  url,
+  showTooltip = true,
+}: Props) {
   return (
     <div className="absolute left-0 top-0 w-full">
       <div className="mx-auto flex max-w-fit items-center rounded-b-lg border border-t-0 border-solid border-gray-6 bg-transparent px-3 py-1 text-gray-6">
@@ -20,10 +24,12 @@ export function LimitedToBeBoxSelectorIndicator({ url }: Props) {
           <Icon icon={Briefcase} className="!mr-1" />
           <span>Business Feature</span>
         </a>
-        <Tooltip
-          size="sm"
-          message="Select this option to preview this business feature."
-        />
+        {showTooltip && (
+          <Tooltip
+            size="sm"
+            message="Select this option to preview this business feature."
+          />
+        )}
       </div>
     </div>
   );

app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/RollbackApplicationButton.tsx

@@ -11,6 +11,7 @@ import { Icon } from '@@/Icon';
 import { confirm } from '@@/modals/confirm';
 import { ModalType } from '@@/modals';
 import { buildConfirmButton } from '@@/modals/utils';
+import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
 
 import {
   useApplicationRevisionList,
@@ -60,27 +61,38 @@ export function RollbackApplicationButton({
     appName
   );
 
+  const isRollbackNotAvailable =
+    !app ||
+    !appRevisions ||
+    appRevisions?.length < 2 ||
+    appDeployMethod !== 'application form' ||
+    patchAppMutation.isLoading;
+
+  const rollbackButton = (
+    <Button
+      ng-if="!ctrl.isExternalApplication()"
+      type="button"
+      color="light"
+      size="small"
+      className="!ml-0"
+      disabled={isRollbackNotAvailable}
+      onClick={() => rollbackApplication()}
+      data-cy="k8sAppDetail-rollbackButton"
+    >
+      <Icon icon={RotateCcw} className="mr-1" />
+      Rollback to previous configuration
+    </Button>
+  );
+
   return (
     <Authorized authorizations="K8sApplicationDetailsW">
-      <Button
-        ng-if="!ctrl.isExternalApplication()"
-        type="button"
-        color="light"
-        size="small"
-        className="!ml-0"
-        disabled={
-          !app ||
-          !appRevisions ||
-          appRevisions?.length < 2 ||
-          appDeployMethod !== 'application form' ||
-          patchAppMutation.isLoading
-        }
-        onClick={() => rollbackApplication()}
-        data-cy="k8sAppDetail-rollbackButton"
-      >
-        <Icon icon={RotateCcw} className="mr-1" />
-        Rollback to previous configuration
-      </Button>
+      {isRollbackNotAvailable ? (
+        <TooltipWithChildren message="Cannot roll back to previous configuration as none currently exists">
+          <span>{rollbackButton}</span>
+        </TooltipWithChildren>
+      ) : (
+        rollbackButton
+      )}
     </Authorized>
   );
 

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

@@ -21,9 +21,8 @@ export function KubeConfigTeaserForm() {
   return (
     <Formik initialValues={initialValues} onSubmit={() => {}} validateOnMount>
       {() => (
-        <Form className="mt-5">
+        <Form>
           <FormSectionTitle>Environment details</FormSectionTitle>
-
           <div className="form-group">
             <div className="col-sm-12">
               <TextTip color="blue">
@@ -32,10 +31,9 @@ export function KubeConfigTeaserForm() {
                     href="https://docs.portainer.io/admin/environments/add/kubernetes/import"
                     target="_blank"
                     rel="noreferrer"
-                    className="mx-1"
                   >
                     Import the kubeconfig file
-                  </a>
+                  </a>{' '}
                   of an existing Kubernetes cluster located on-premise or on a
                   cloud platform. This will create a corresponding environment
                   in Portainer and install the agent on the cluster. Please
@@ -43,7 +41,7 @@ export function KubeConfigTeaserForm() {
                 </span>
               </TextTip>
             </div>
-            <div className="col-sm-12 text-muted small">
+            <div className="col-sm-12 text-muted text-xs">
               <ul className="p-2 pl-4">
                 <li>You have a load balancer enabled in your cluster</li>
                 <li>You specify current-context in your kubeconfig</li>

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

@@ -30,14 +30,14 @@ div.limited-be {
 }
 
 .limited-be-content {
-  @apply border-gray-6 p-2.5 text-xs opacity-50;
+  @apply border-gray-6 p-2.5 opacity-50;
 }
 
 .limited-be-link {
   padding: 10px;
   width: inherit;
   z-index: 5;
-  position: relative;
+  position: absolute;
   top: 0px;
   right: 0px;
   float: right;