Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 07:49:41 +02:00
Code Issues Releases Activity

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

Browse source
This commit is contained in:
Chaim Lev-Ari 2023-03-19 13:37:35 +01:00 • committed by GitHub
parent 76bdf6f220
commit 45def82156
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 44 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

29
app/react/components/BoxSelector/BoxSelectorItem.tsx
View file

@ -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} />;
}
}