fix(ui/box-selector): BE link and use icons standard size [EE-5133] (#8607)

app/react/components/BoxSelector/BoxSelectorItem.tsx

@@ -2,10 +2,10 @@ import clsx from 'clsx';
 import { Icon as ReactFeatherComponentType, Check } from 'lucide-react';
 import { Fragment } from 'react';
 
-import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { Icon } from '@/react/components/Icon';
 
 import { BadgeIcon } from '@@/BadgeIcon';
+import { getFeatureDetails } from '@@/BEFeatureIndicator/utils';
 
 import styles from './BoxSelectorItem.module.css';
 import { BoxSelectorOption, Value } from './types';
@@ -36,7 +36,9 @@ export function BoxSelectorItem<T extends Value>({
   slim = false,
   checkIcon = Check,
 }: Props<T>) {
-  const limitedToBE = isLimitedToBE(option.feature);
+  const { limitedToBE = false, url: featureUrl } = getFeatureDetails(
+    option.feature
+  );
 
   const beIndicatorTooltipId = `box-selector-item-${radioName}-${option.id}-limited`;
 
@@ -57,7 +59,12 @@ export function BoxSelectorItem<T extends Value>({
       type={type}
       checkIcon={checkIcon}
     >
-      {limitedToBE && <LimitedToBeIndicator tooltipId={beIndicatorTooltipId} />}
+      {limitedToBE && (
+        <LimitedToBeIndicator
+          tooltipId={beIndicatorTooltipId}
+          url={featureUrl}
+        />
+      )}
       <div
         className={clsx('flex gap-2', {
           'opacity-30': limitedToBE,
@@ -89,15 +96,15 @@ export function BoxSelectorItem<T extends Value>({
       return <BadgeIcon icon={option.icon} />;
     }
 
-    if (option.iconType === 'logo') {
-      return <LogoIcon icon={option.icon} />;
+    if (option.iconType === 'raw') {
+      return (
+        <Icon
+          icon={option.icon}
+          className={clsx(styles.icon, '!flex items-center')}
+        />
+      );
     }
 
-    return (
-      <Icon
-        icon={option.icon}
-        className={clsx(styles.icon, '!flex items-center')}
-      />
-    );
+    return <LogoIcon icon={option.icon} />;
   }
 }

app/react/components/BoxSelector/LimitedToBeIndicator.tsx

@@ -1,24 +1,24 @@
 import { HelpCircle } from 'lucide-react';
 import clsx from 'clsx';
 
-import { FeatureId } from '@/react/portainer/feature-flags/enums';
-
 import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
-import { getFeatureDetails } from '@@/BEFeatureIndicator/utils';
 
 interface Props {
   tooltipId: string;
-  featureId?: FeatureId;
+  url?: string;
 }
 
-export function LimitedToBeIndicator({ featureId, tooltipId }: Props) {
-  const { url } = getFeatureDetails(featureId);
-
+export function LimitedToBeIndicator({ tooltipId, url }: Props) {
   return (
     <div className="absolute left-0 top-0 w-full">
       <div className="mx-auto flex max-w-fit items-center gap-1 rounded-b-lg bg-warning-4 py-1 px-3 text-sm">
-        <a href={url} target="_blank" rel="noopener noreferrer">
-          <span className="text-warning-9">BE Feature</span>
+        <a
+          className="text-warning-9"
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+        >
+          BE Feature
         </a>
         <TooltipWithChildren
           position="bottom"

app/react/components/BoxSelector/common-options/deployment-methods.tsx

@@ -9,6 +9,7 @@ export const kubernetes: BoxSelectorOption<'kubernetes'> = {
   label: 'Kubernetes',
   description: 'Kubernetes manifest format',
   value: 'kubernetes',
+  iconType: 'logo',
 };
 
 export const compose: BoxSelectorOption<'compose'> = {
@@ -17,4 +18,5 @@ export const compose: BoxSelectorOption<'compose'> = {
   label: 'Compose',
   description: 'docker-compose format',
   value: 'compose',
+  iconType: 'logo',
 };