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

app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html

@@ -14,6 +14,7 @@
     value="$ctrl.settings.ServerType"
     options="$ctrl.boxSelectorOptions"
     on-change="($ctrl.onChangeServerType)"
+    slim="true"
   ></box-selector>
 
   <ldap-settings-custom

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',
 };

app/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector.tsx

@@ -40,6 +40,7 @@ export function EdgeStackDeploymentTypeSelector({
         hasDockerEndpoint
           ? 'Cannot use this option with Edge Docker environments'
           : '',
+      iconType: 'logo',
     },
   ];
 

app/react/portainer/settings/AuthenticationView/InternalAuth/options.tsx

@@ -5,12 +5,11 @@ import Microsoft from '@/assets/ico/vendor/microsoft.svg?c';
 import Ldap from '@/assets/ico/ldap.svg?c';
 import OAuth from '@/assets/ico/oauth.svg?c';
 
-import { BadgeIcon } from '@@/BadgeIcon';
-
 export const options = [
   {
     id: 'auth_internal',
-    icon: <BadgeIcon icon={ArrowDownCircle} />,
+    icon: ArrowDownCircle,
+    iconType: 'badge',
     label: 'Internal',
     description: 'Internal authentication mechanism',
     value: 1,
@@ -20,6 +19,7 @@ export const options = [
     icon: Ldap,
     label: 'LDAP',
     description: 'LDAP authentication',
+    iconType: 'logo',
     value: 2,
   },
   {
@@ -27,6 +27,7 @@ export const options = [
     icon: Microsoft,
     label: 'Microsoft Active Directory',
     description: 'AD authentication',
+    iconType: 'logo',
     value: 4,
     feature: FeatureId.HIDE_INTERNAL_AUTH,
   },
@@ -35,6 +36,7 @@ export const options = [
     icon: OAuth,
     label: 'OAuth',
     description: 'OAuth authentication',
+    iconType: 'logo',
     value: 3,
   },
 ];

app/react/portainer/settings/AuthenticationView/ldap-options.tsx

@@ -3,8 +3,6 @@ import { Edit } from 'lucide-react';
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
 import Openldap from '@/assets/ico/vendor/openldap.svg?c';
 
-import { BadgeIcon } from '@@/BadgeIcon';
-
 const SERVER_TYPES = {
   CUSTOM: 0,
   OPEN_LDAP: 1,
@@ -14,7 +12,8 @@ const SERVER_TYPES = {
 export const options = [
   {
     id: 'ldap_custom',
-    icon: <BadgeIcon icon={Edit} />,
+    icon: Edit,
+    iconType: 'badge',
     label: 'Custom',
     value: SERVER_TYPES.CUSTOM,
   },
@@ -24,5 +23,6 @@ export const options = [
     label: 'OpenLDAP',
     value: SERVER_TYPES.OPEN_LDAP,
     feature: FeatureId.EXTERNAL_AUTH_LDAP,
+    iconType: 'logo',
   },
 ];

app/react/portainer/settings/AuthenticationView/oauth-options.tsx

@@ -5,8 +5,6 @@ import Microsoft from '@/assets/ico/vendor/microsoft.svg?c';
 import Google from '@/assets/ico/vendor/google.svg?c';
 import Github from '@/assets/ico/vendor/github.svg?c';
 
-import { BadgeIcon } from '@@/BadgeIcon';
-
 export const options = [
   {
     id: 'microsoft',
@@ -14,6 +12,7 @@ export const options = [
     label: 'Microsoft',
     description: 'Microsoft OAuth provider',
     value: 'microsoft',
+    iconType: 'logo',
     feature: FeatureId.HIDE_INTERNAL_AUTH,
   },
   {
@@ -22,6 +21,7 @@ export const options = [
     label: 'Google',
     description: 'Google OAuth provider',
     value: 'google',
+    iconType: 'logo',
     feature: FeatureId.HIDE_INTERNAL_AUTH,
   },
   {
@@ -30,11 +30,13 @@ export const options = [
     label: 'Github',
     description: 'Github OAuth provider',
     value: 'github',
+    iconType: 'logo',
     feature: FeatureId.HIDE_INTERNAL_AUTH,
   },
   {
     id: 'custom',
-    icon: <BadgeIcon icon={Edit} />,
+    icon: Edit,
+    iconType: 'badge',
     label: 'Custom',
     description: 'Custom OAuth provider',
     value: 'custom',